Validating jQuery text field integrated with ckeditor

Question

I have a text-area

 <td><textarea id="event-body" name="body"> <p class="error"></p> 

It is integrated with CKEDITOR

 CKEDITOR.replace("event-body") 

And jquery validate plugin . And the code is like this

 $('#event').validate({ rules:{ name:{ required: true }, }, messages:{ body:{ required: "event body is required" } }, errorPlacement: function(error, element){ $(element).each(function (){ $(this).parent('td').find('p.error').html(error); }) }); 

The code works fine, but when I enter my textarea element, I still get an error until I double-click. those. I have to send the page twice so that there is no error message even if textarea not empty.

There is no way to test it smoothly (without having to double-click it).

Answer 1

Look here

Mostly you need to call

 CKEDITOR.instances.editor1.updateElement(); 

before starting the scan.

Just replace editor1 with the name of your text box.

Then call

 $(myformelement).validate(); 

EDIT

 $("#my-form-submit-button").click(function(e){ e.preventDefault(); CKEDITOR.instances.event-body.updateElement(); $('#event').validate({ ...options as above.. });o }) 

Answer 2

The jQuery validator only validates input fields that are visible, but CKEDITOR makes a hidden text area, preventing it from being validated.

Answer 3

Put this in the mousedown () submit button:

 $("#submit").mousedown(function(){ for (var i in CKEDITOR.instances){ CKEDITOR.instances[i].updateElement(); } }); 

Answer 4

I have combined your suggestions and will make this little cheat that works without problems.

My code is:

 <form id="create-message-form-3" class="form-horizontal" role="form" accept-charset="utf-8"> <div class="title"><h1>Add Content:</h1></div> <div class="col col-12"> <textarea class="form-control ckeditor" name="templateeditor" id="templateeditor" rows="6"></textarea> <p class="error"></p> </div> <div class="text-center"> <a class="btn btn-success pull-left" href="create-message-2.php">Back</a> <input class="btn btn-default" type="button" value="Save"> <input id="submit-templateeditor" class="btn btn-success pull-right" type="submit" value="Next Step"> </div> </form> 

In my .css file, I made me look like this:

 textarea.ckeditor { visibility: visible !important; display: block !important; height: 0px !important; border: none !important; resize:none; overflow: hidden; } 

And checking my .js is the normal format:

  $("#submit-templateeditor").click(function(){ CKEDITOR.instances.templateeditor.updateElement(); $("#create-message-form-3").validate({ rules: { templateeditor: "required" }, messages: { templateeditor: "Please add some code before continue" }, errorPlacement: function(error, element){ $(element).each(function (){ $(this).parent('div').find('p.error').html(error); }); } }); }); 

Answer 5

Use this in your javascript where you check your form. It will update your ckeditor and assign the ckeditor value to your text area to which you integrate it.

It should start before submitting the form:

 CKEDITOR.instances.editor1.updateElement(); 

Answer 6

If you attach it as

 $("#Detail").ckeditor(config); 

than you will need to use something like this

 var editor = $('#Detail').ckeditorGet(); editor.updateElement(); 

I use this example function to submit my form in this case

 function SubmitEvent(){ var editor = $('#Detail').ckeditorGet(); editor.updateElement(); if($("#EventForm").valid()) { $('#EventForm').submit(); } } 

Answer 7

I would prefer to update every instance of the blur event, so you don't need to change anything in your submit function! :)

 $('#myInstance').ckeditor({toolbar:'MyToolbar'}); CKEDITOR.instances.myInstance.on('blur', function( e ){ CKEDITOR.instances.myInstance.updateElement(); }); 

Answer 8

The jQuery.validate () function provides an onsubmit parameter to perform custom actions before validation. The default value is true. I used it in my project and it works very well.

  $(".selector").validate({ onsubmit: function(){ CKEditorUpdate(); return true; }, rules:{ title:{required:true}, content:{required:true} }, messages:{ title:{required:"Please enter a title"}, content:{required:"Please enter some content"} }, submitHandler : function(form){ }); function CKEditorUpdate() { for (instance in CKEDITOR.instances) CKEDITOR.instances[instance].updateElement(); } 

This is a more understandable and understandable approach. See http://jqueryvalidation.org/validate#onsubmit

Answer 9

If you use SPRY, this is what worked for me ....

 <script> $(document).ready(function () { CKEDITOR.instances["editor1"].on("instanceReady", function () { //set keyup event this.document.on("keyup", function () { CKEDITOR.instances["editor1"].updateElement(); }); //and paste event this.document.on("paste", function () { CKEDITOR.instances["editor1"].updateElement(); }); //and cut event this.document.on("cut", function () { CKEDITOR.instances["editor1"].updateElement(); }); }); CKEDITOR.instances["editor2"].on("instanceReady", function () { //set keyup event this.document.on("keyup", function () { CKEDITOR.instances["editor2"].updateElement(); }); //and paste event this.document.on("paste", function () { CKEDITOR.instances["editor2"].updateElement(); }); //and cut event this.document.on("cut", function () { CKEDITOR.instances["editor2"].updateElement(); }); }); CKEDITOR.instances["editor3"].on("instanceReady", function () { //set keyup event this.document.on("keyup", function () { CKEDITOR.instances["editor3"].updateElement(); }); //and paste event this.document.on("paste", function () { CKEDITOR.instances["editor3"].updateElement(); }); //and cut event this.document.on("cut", function () { CKEDITOR.instances["editor3"].updateElement(); }); }); }); </script>