CKEditor solutions that cannot be validated (JS validation +jquery validate validation) _jquery

The front end of the recent project uses jquery, and the front end of the form is validated with jquery Validate, which is easy to use and always satisfying.

Some time ago, according to the requirements for the form of the textarea type of elements added HTML Rich Text Editor, with the CKEditor, powerful, custom convenient, also very satisfied.

However, with the CKEditor enhanced TEXTAREA element, this field requires Non-empty, in jquery validate is always validated, because after the CKEditor editor fills in the content, the editor does not immediately update the content to the original textarea element in the I did not look at the source code, tried a situation is that every time the submission does not pass, the second submission can be passed, it seems that the editor is in the Submit event before the content of the editor to update the contents of the textarea (this is a guess, do not know right, I am on jquery and CKEditor are not very familiar with, is to take to use, have a problem to put the kind of dog.

So I found the code to solve the problem on the Internet, the code is not I wrote, I just recorded the problem I encountered, the code is not original. The principle is to update the content to the TEXTAREA element immediately after the editor has updated the content.

ckeditor.instances["Page_content"].on ("Instanceready", function () 
    { 
            //set event 
            This.document.on ("KeyUp", Updatetextarea); 
             and paste event 
            this.document.on ("Paste", Updatetextarea); 
 
    }); 
 
    function Updatetextarea () 
    { 
        CKEDITOR.tools.setTimeout (function () 
              {  
                $ ("#page_content"). Val ( CKEDITOR.instances.page_content.getData ()); 
                $ ("#page_content"). Trigger (' KeyUp '); 
              }, 0);  
     

At present, all the use of normal, to solve a problem that I have a headache.

Another way to solve the problem:

The CKEditor editor is an enhanced textarea element that, after filling out the content, does not immediately update the content to the original TEXTAREA element, but instead waits until the submit event to update the editor's contents to the textarea.
Therefore, the normal JS verification or jquery validate validation can not get the value of the editor.

1.js Verification
Getting the value of the CKEditor editor is really easy, the value is CKEDITOR.instances.mckeditor.getData (), and the instance code is as follows:

<script language= "javascript" type= "Text/javascript" > Function Checkform () {var f=documen 
         T.form1; 
         var Topicheading=f.tbtopicheading.value; 
         topicheading = Topicheading.replace (/^\s+/g, ""); 
                 topicheading = Topicheading.replace (/\s+$/g, ""); 
                    if (topicheading = = "") {alert ("Enter the title of the topic you are publishing."); 
                    F.tbtopicheading.focus (); 
                  return false; 
                  } if (TOPICHEADING.LENGTH&GT;50); 
                   {Alert ("topic length must be within 50 characters."); 
                   F.tbtopicheading.focus (); 
                  return false; 
          
         var topiccontent=ckeditor.instances.mckeditor.getdata (); 
         Topiccontent = Topiccontent.replace (/^\s+/g, ""); 
                 Topiccontent = Topiccontent.replace (/\s+$/g, ""); 
             if (topiccontent = = "") {       Alert ("Please fill in the topic content."); 
                    F.mckeditor.focus (); 
                  return false; } if (topiccontent.length>4000) {alert ("The length of the topic content must be within 4000 characters 
                   ."); 
                   F.mckeditor.focus (); 
                  return false; 
 }} </script>

Where Mckeditor is the ID and name of the editor's textarea.
Asp. NET is the same:

Copy Code code as follows:

<asp:textbox id= "Mckeditor" runat= "Server" textmode= "MultiLine" width= "94%" height= "400px" cssclass= "CKEditor" ></asp:TextBox>

2.jQuery Validate Verification
The validation mode of jquery does not directly use the value of CKEDITOR.instances.mckeditor.getData ().
It uses the following form to submit validation:

function Initrules () { 
      opts = { 
         rules: 
         { 
            tbtopicheading:{ 
            required:true, 
            maxlength:50   
          },           
          mckeditor:{ 
            required:true, 
            maxlength:4000 
          }  
         }, 
         messages: 
         { 
          tbtopicheading:{ 
          Required: "Please enter the title of the topic.", 
          maxlength:jQuery.format ("topic length must be within 50 characters.")  
        }, 
          mckeditor:{ 
          Required: "Please fill in the topic content.", 
          Maxlength:jQuery.format ("The length of the topic must be within 4000 characters.")}  
      }} 
     

The mckeditor is the control ID, which not only has the function of value, but also indicates the role of information positioning.
Therefore, you can add the instantiation Editor code when the page loads, and then update the content to the TEXTAREA element immediately after the editor has updated the contents.

The code is as follows:

<script type= "Text/javascript" > 
//<![ cdata[ 
ckeditor.instances["Mckeditor"].on ("Instanceready", function ()    
    {    
            //set event  
            This.document.on ("KeyUp", Updatetextarea);  
             and paste event 
            this.document.on ("Paste", Updatetextarea);   
    });    
 
    function Updatetextarea ()  
    {    
        CKEDITOR.tools.setTimeout (function () 
              {    
                $ ("#mckeditor"). Val ( CKEDITOR.instances.mckeditor.getData ());    
                $ ("#mckeditor"). Trigger (' KeyUp ');    
              }, 0);   
]]> 
              </script> 

This piece of code is placed under the editor control. The complete example is as follows:

<asp:textbox id= "Mckeditor" runat= "Server" textmode= "MultiLine" width= "98%" height= "400px" cssclass= "CKEditor" ></asp:TextBox> <script type= "Text/javascript" >//<! [cdata[ckeditor.replace (' <%=mckeditor. ClientID%> ',//Mckeditor. ClientID for the corresponding client generated by the TextBox Mckeditor, see the id {skin: ' kama ',//Set the Skin Entermode:number (2),//Set Enter for the Enter 1.&LT;P&GT;2 for <br/ >3 for <div> shiftentermode:number (1),//Set Shiftenter input Disablenativespellchecker:false, scayt_autostartup:f Alse, Toolbar_full: [[' Source ', '-', ' Save ', ' newpage ', ' Preview ', '-'], [' Cut ', ' Copy ', ' Paste ', ' pastetext ', ' Pastefromword ', '-'], [' Undo ', ' Redo ', '-', ' find ', ' Replace ', '-', ' selectall ', ' Removeformat '], [' Numberedlist ', ' BulletedList ', '-', ' outdent ', ' Indent '], [' Justifyleft ', ' justifycenter ', ' justifyright ', ' Justifyblock '], [' Link ', '] Unlink ', ' Anchor '], [' Image ', ' Table ', ' horizontalrule '],[' subscript ', ' superscript '], '/', [' Bold ', ' Italic ', ' Underline '], [' TextColor ', ' bgcolor '], [' Styles ', ' Format ', 'Font ', ' fontsize ']],//filebrowserbrowseurl: ' <%=resolveurl ("~/ckfinder/ckfinder.html")%> ',//enable browsing function, Official use of the occasion can be closed, only allow users to upload//filebrowserimagebrowseurl: ' <%=resolveurl (~/ckfinder/ckfinder.html? Type=images ")%> ',//filebrowserimageuploadurl: ' <%=resolveurl (" ~/ckfinder/core/connector/aspx/ Connector.aspx?command=quickupload&type=images ")%> ' If you use ckfinder do not mask//custom upload filebrowserimageuploadurl: ' 
<%=resolveurl ("~/fileupload/fileupload.aspx?command=quickupload&type=images")%> '}); ckeditor.instances["Mckeditor"].on ("Instanceready", function () {//set KeyUp event this.do  
             Cument.on ("KeyUp", Updatetextarea);  
    and paste Event This.document.on ("Paste", Updatetextarea);  
 
    }); function Updatetextarea () {CKEDITOR.tools.setTimeout (function () {$ ("#mck  
                Editor "). Val (CKEDITOR.instances.mckeditor.getData ()); $ ("#mckeditor"). Trigger (' KeYup ');  
    }, 0);  }//]]> </script>

The above is to solve the ckeditor can not verify the two programs, I believe that we have the same as small series have been harvested, thank you for your reading.