与 ckeditor 集成的 textarea 的 jquery 验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5126565/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery validation of textarea integrated with ckeditor
提问by Santosh Linkha
I have a text-area
我有一个 text-area
<td><textarea id="event-body" name="body">
<p class="error"></p>
That is integrated with CKEDITOR
与CKEDITOR集成
CKEDITOR.replace("event-body")
And jquery validate plugin. And the code is like this
和 jquery 验证插件。代码是这样的
$('#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 textareaelement, 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 textareais not empty.
代码工作正常，但是当我输入textarea元素时，我仍然收到错误消息，直到我单击它两次。即我必须提交我的页面两次，这样我就不会出现错误消息，即使textarea不是空的。
Isn't there a way to validate it smoothly(without having to click it twice).
没有办法顺利验证它（无需单击两次）。
回答by Mr Hyde
Take a look here
看看这里
Basically you need to call
基本上你需要打电话
CKEDITOR.instances.editor1.updateElement();
before running validation.
在运行验证之前。
Just replace editor1with the name of your textarea.
只需替换editor1为您的 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
})
回答by user620967
Put this in submit button mousedown() event:
把它放在提交按钮 mousedown() 事件中：
$("#submit").mousedown(function(){
for (var i in CKEDITOR.instances){
CKEDITOR.instances[i].updateElement();
}
});
回答by killebytes
jQuery validator only validate input fields that are visible but CKEDITOR makes the textarea hidden preventing it from being validated.
jQuery 验证器只验证可见的输入字段，但 CKEDITOR 使 textarea 隐藏以防止它被验证。
回答by Mariela Gonzalez
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:
在我的 .css 文件中，我强迫我变成这样：
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:
我的 .js 验证是正常格式：
$("#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);
});
}
});
});
回答by Anubhav Aggarwal
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.
jQuery .validate() 函数提供“onsubmit”选项以在验证前执行自定义操作。默认情况下，它设置为 true。我在我的项目中使用过它，效果很好。
$(".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
这是一种更清晰、更容易理解的方法。参考http://jqueryvalidation.org/validate#onsubmit
回答by Rafael Moni
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();
});
回答by Chris Hough
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();
}
}
回答by Ata ul Mustafa
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.
在您验证表单的 javascript 中使用它。它将更新您的 ckeditor，并将 ckeditor 的值分配给您集成它的 textarea。
It should run before form is submitted:
它应该在提交表单之前运行：
CKEDITOR.instances.editor1.updateElement();
回答by vinylDeveloper
IF your using SPRY, This is what worked for me....
如果您使用 SPRY，这对我有用....
<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>
