问题
I have a text-area
<td><textarea id="event-body" name="body">
<p class="error"></p>
That 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 just fine but when I type into my textarea element, I still get the error message until I click it twice. i.e. I have to submit my page twice so that I don't error message even if textarea is not empty.
Isn't there a way to validate it smoothly(without having to click it twice).
回答1:
Take a look here
Basically you need to call
CKEDITOR.instances.editor1.updateElement();
before running validation.
Just replace editor1 with the name of your textarea.
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
})
回答2:
Put this in submit button mousedown() event:
$("#submit").mousedown(function(){
for (var i in CKEDITOR.instances){
CKEDITOR.instances[i].updateElement();
}
});
回答3:
jQuery validator only validate input fields that are visible but CKEDITOR makes the textarea hidden preventing it from being validated.
回答4:
I've combined your sugestions and make this little cheat that works with no problem.
My code:
<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>
On my .css file, I forced my to be like this:
textarea.ckeditor {
visibility: visible !important;
display: block !important;
height: 0px !important;
border: none !important;
resize:none;
overflow: hidden; }
And my .js validation 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);
});
}
});
});
回答5:
Use this in your javascript where you are validating your form. It will update your ckeditor and will assign ckeditor's value to your textarea to which you integrate it.
It should run before form is submitted:
CKEDITOR.instances.editor1.updateElement();
回答6:
If you are attaching it like
$("#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();
}
}
回答7:
I would prefer to update each instance on blur event, so you don't need to change anything on your submit function! :)
$('#myInstance').ckeditor({toolbar:'MyToolbar'});
CKEDITOR.instances.myInstance.on('blur', function( e ){
CKEDITOR.instances.myInstance.updateElement();
});
回答8:
jQuery .validate() function provides "onsubmit" option to perform custom action before validation. By default it is set to true. I have 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 cleaner and much easier to understand approach. Refer http://jqueryvalidation.org/validate#onsubmit
回答9:
IF your using 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>
来源：https://stackoverflow.com/questions/5126565/jquery-validation-of-textarea-integrated-with-ckeditor