How do I use the jquery.validationEngine plugin to validate CLEditor wysiwyg editor inputs? I am trying to validate an html editor input on form submission using the specific jquery plug-ins referenced.
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 />, , {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>