How to use Jquery Validation Engine to validate CLEditor (html editor) inputs

Question 1

This is the solution that I came up with. You can also get a copy from pastebin

<-- PLEASE, vote if it was helpful.

    // Include all the jquery, jquery ui, cleditor, and validation-engine CSS and javascript library files here


    <script type="text/javascript">

    // object used to store the validation states of any html editor textarea inputs used on the page
    var editorStates = new Object();

    // add one property/value for each textarea id that you are using on this page..
    // in this example there are going to be three diferent editor inputs:
    editorStates['your_textarea_id_1']=true; 
    editorStates['your_textarea_id_2']=true;
    editorStates['your_textarea_id_etc']=true;


    $(document).ready(function(){


        // ==========================================================================
        // initialize the cleditor object(s) for the textarea(s) used on this page...
        // ==========================================================================

            // initialize the 'your_textarea_id_1' textarea and store the cleditor object in the 'your_textarea_id_1_editor' variable...  
            var your_textarea_id_1_editor = $("#your_textarea_id_1").cleditor({
                width:        650, // width not including margins, borders or padding
                height:       220, // height not including margins, borders or padding
                controls:     // controls to add to the toolbar
                "bold italic underline | font size " +
                "style | color highlight removeformat | bullets numbering | outdent " +
                "indent | alignleft center alignright justify | pastetext source",
            }).change(function (){
                if(editorStates['your_textarea_id_1']==false){ // input has been validated as false so need to check it as user types so the flag goes away when appropriate...
                    valid_editor_text('your_textarea_id_1'); // re-validate this input
                };
            });

            // initialize the 'your_textarea_id_2' textarea and store the cleditor object in the 'your_textarea_id_2_editor' variable...  
            var your_textarea_id_2_editor = $("#your_textarea_id_2").cleditor({
                width:        650, // width not including margins, borders or padding
                height:       220, // height not including margins, borders or padding
                controls:     // controls to add to the toolbar
                "bold italic underline | font size " +
                "style | color highlight removeformat | bullets numbering | outdent " +
                "indent | alignleft center alignright justify | pastetext source",
            }).change(function (){
                if(editorStates['your_textarea_id_2']==false){ // input has been validated as false so need to check it as user types so the flag goes away when appropriate...
                    valid_editor_text('your_textarea_id_2'); // re-validate this input
                };
            });

            // initialize the 'your_textarea_id_etc' textarea and store the cleditor object in the 'your_textarea_id_etc_editor' variable...  
            var your_textarea_id_etc_editor = $("#your_textarea_id_etc").cleditor({
                width:        650, // width not including margins, borders or padding
                height:       220, // height not including margins, borders or padding
                controls:     // controls to add to the toolbar
                "bold italic underline | font size " +
                "style | color highlight removeformat | bullets numbering | outdent " +
                "indent | alignleft center alignright justify | pastetext source",
            }).change(function (){
                if(editorStates['your_textarea_id_etc']==false){ // input has been validated as false so need to check it as user types so the flag goes away when appropriate...
                    valid_editor_text('your_textarea_id_etc'); // re-validate this input
                };
            });

        // ==========================================================================
        // initialize the jquery validation-engine
        // ==========================================================================

            // Note: 'mainform' is the id value of the form element that contains the three textarea inputs
            //       Replace this with the id value of YOUR form id!
            jQuery("#mainform").validationEngine('attach', {
                onValidationComplete: function(form, status){

                        // Note: 'status' will already be true/false based on the validation results of any other inputs that you
                        //       are validating using the typical validation methods provided by the validationEngine plugin.

                        // Now we need to validate the textarea (cleditor html editor) inputs...

                        //  validate the 'your_textarea_id_1' textarea input
                        if( your_textarea_id_1_editor[0].sourceMode() == false ){
                            // in editor mode, need to update the hidden textarea input
                            your_textarea_id_1_editor[0].updateTextArea();
                        }
                        if(! valid_editor_text('your_textarea_id_1') ){ // <-- pass the textarea id value to the 'valid_editor_text' function
                            // The validation on this input failed...
                            status=false; // prevent the form from submitting
                        }

                        //  validate the 'your_textarea_id_2' textarea input
                        if( your_textarea_id_2_editor[0].sourceMode() == false ){
                            // in editor mode, need to update the hidden textarea input
                            your_textarea_id_2_editor[0].updateTextArea();
                        }
                        if(! valid_editor_text('your_textarea_id_2') ){ // <-- pass the textarea id value to the 'valid_editor_text' function
                            // The validation on this input failed...
                            status=false; // prevent the form from submitting
                        }

                        //  validate the 'your_textarea_id_etc' textarea input
                        if( your_textarea_id_etc_editor[0].sourceMode() == false ){
                            // in editor mode, need to update the hidden textarea input
                            your_textarea_id_etc_editor[0].updateTextArea();
                        }
                        if(! valid_editor_text('your_textarea_id_etc') ){ // <-- pass the textarea id value to the 'valid_editor_text' function
                            // The validation on this input failed...
                            status=false; // prevent the form from submitting
                        }


                        // submit if there are no validation errors
                        if(status == true){
                            form.validationEngine('detach'); // prevents an endless loop
                            form.submit(); // form is valid, now submit it
                        }


                }
            });


    }); // end doc ready


    // ============================================================================
    // The 'valid_editor_text' function
    // This function does the actual validation of the textarea (html editor) input 
    // ============================================================================
        function valid_editor_text(inputID){        


            str = $('#'+inputID).val();

            // Note: str contains the value of the textarea input so do whatever validations you need
            //       against that.  Return true if it's valid or false if it isn't.


            // Right now I am just checking to make sure that the user entered anything at all ...

            // remove any <br>, <br />, &nbsp;, {spaces}, and/or {newlines} from the beginning of the string
            // just to make sure the user typed some actual text instead of random spaces and enter keys (aka nothing)
            str = str.replace(/^(?:<[Bb][Rr](?: \/)?>|\&[Nn][Bb][Ss][Pp];|\n| )+/g,'');
            if(str.length > 0){
                console.log("valid_editor_text('"+inputID+"')"+' returning true');
                editorStates[inputID]=true;
                // hide any previous prompts on this input
                $('#'+inputID+'_prompt_location').validationEngine('hide');
                return true;
            }else{
                console.log("valid_editor_text('"+inputID+"')"+' returning false');
                editorStates[inputID]=false;
                // need to display the validation message for this input
                $('#'+inputID+'_prompt_location').validationEngine('showPrompt', 'This field is required.', 'required', 'topRight', true);
                return false;
            }
        }

    </script>


</head>
<body>


<form action="youraction.goes.here" method="post" name="mainform" id="mainform">


<!-- Add a placeholder div that is used to target the position of a validation message if the validation fails
     The id value is the value of your textarea id with '_prompt_location' appended, like so.. -->
<div>     
<div id="your_textarea_id_1_prompt_location"></div>

<!-- Finally, the textarea input that is causing all this fuss .. -->
<textarea id="your_textarea_id_1" name="your_textarea_id_1"></textarea>
</div>

<!-- repeat for the other textareas you are using .. -->
<div>
<div id="your_textarea_id_2_prompt_location"></div>
<textarea id="your_textarea_id_2" name="your_textarea_id_2"></textarea>
</div>

<div>
<div id="your_textarea_id_etc_prompt_location"></div>
<textarea id="your_textarea_id_etc" name="your_textarea_id_etc"></textarea>
</div>



<p>Here is a standard text input to demo how typical validation works along with our custom ..<br />
<input type="text" name="a_standard_input" id="a_standard_input" value="" class="validate[required]" />
</p>

<p>
<input type="submit" name="b1" value="Submit this form!" />
<!-- Note:  the validation occurs when the form is submitted via submit button or javascript (not shown) -->
</p>

</form>

</body>
</html>

Question 2

A simpler solution: read the validationengine documentation
Now, say you want to prevent the form from being submitted if the text size is more than 65536 characters:

<script type="text/javascript">
jQuery(document).ready(function(){
// binds form submission and fields to the validation engine
jQuery("#newForm").validationEngine();
});
</script>

<script type="text/javascript">
$(document).ready(function() {
$("#textArea").cleditor({
// cleditor options here
});
});
</script>

<form id="newForm" name="newForm" method="post" action="yourphppage.php" onSubmit="return validatesize()">
<textarea id="textArea" name="textArea"></textarea>
<input name="submit" id="button" type="submit" value="Submit">
</form>

<script type="text/javascript">
function validatesize() {
submitFlag=true;
if(document.newForm.textArea.value.length>65536){
    submitFlag=false;
    $("#textArea").validationEngine('showPrompt', 'Custom message', 'red', 'bottomLeft')
}
return submitFlag;
}
</script>

Don't forget to place the scripts in the HEAD section:

<link rel="stylesheet" type="text/css" href="jquery.cleditor.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.cleditor.js"></script>
<link rel="stylesheet" href="validationEngine.jquery.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery.validationEngine.js"></script>
<script type="text/javascript" src="jquery.validationEngine-en.js"></script>