如何使用jquery驗證引擎來驗證CLEditor（html編輯器）輸入

Question

如何使用jquery.validationEngine插件驗證CLEditor wysiwyg編輯器輸入？我正在嘗試使用引用的特定jquery插件驗證表單提交的html編輯器輸入。

Answer 1

這是我想出的解決方案。您還可以從pastebin

< - 請PLEASE，投票，如果它是有幫助的副本。

// 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> 

Answer 2

一個簡單的辦法：閱讀validationengine文檔現在
，說要防止表單被提交，如果文本大小超過65536個字符：

<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> 

不要忘記將腳本放在HEAD部分：

<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>