Jquery 验证不适用于 ckeditor
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22248918/
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 not working with ckeditor
提问by PHPCoder
I am using jQuery to validate forms.. but when I use CKeditor and try to validate it using jQuery, it's not working.
我正在使用 jQuery 来验证表单......但是当我使用 CKeditor 并尝试使用 jQuery 验证它时，它不起作用。
Here is the snippet of HTML code
这是 HTML 代码的片段
<form class="form-horizontal" role="form" name="f3" id="f3" >
<div class="col-xs-8">
<textarea class="ckeditor" name="cktext" id="cktext"></textarea>
</div>
<button type="submit" class="btn btn-default btn-success">Submit</button>
</form>
Here is the form validation code
这是表单验证代码
<script>
$(document).ready(function(){
$("#f3").validate(
{
debug: false,
rules: {
cktext: {
required: true,
minlength: 10
}
}
});
});
</script>
FYI : jQuery validation working for other form fields expect the ckeditor textareafield
仅供参考：适用于其他表单字段的 jQuery 验证需要ckeditor textarea字段
Any suggestions.. to get rid of this problem..
任何建议..摆脱这个问题..
回答by PHPCoder
Finally i found the answer to my question...
终于我找到了我的问题的答案......
I changed the value of ignore property which by default holds :hidden value. as CKEDITOR hides the textarea jQuery validation doesn't validate the element:
我更改了默认情况下包含 :hidden 值的 ignore 属性的值。由于 CKEDITOR 隐藏 textarea jQuery 验证不验证元素：
ignore: []
Just i changed the validation script as follows..
只是我更改了验证脚本如下..
$(document).ready(function(){
$("#f3").validate(
{
ignore: [],
debug: false,
rules: {
cktext:{
required: function()
{
CKEDITOR.instances.cktext.updateElement();
},
minlength:10
}
},
messages:
{
cktext:{
required:"Please enter Text",
minlength:"Please enter 10 characters"
}
}
});
});
HTML snippet is
HTML 片段是
<form class="form-horizontal" role="form" name="f3" id="f3" >
<div class="col-xs-8">
<textarea class="ckeditor" name="cktext" id="cktext"></textarea>
</div>
<button type="submit" class="btn btn-default btn-success">Submit</button>
</form>
As i found this answer in Here
当我在这里找到这个答案时
Thanks to all...
谢谢大家...
回答by Ryley
I took the previous answer and fleshed it out with an actual CKEditor, so that you can see what needs to be done to copy the contents of the CKEditor into your textarea beforesubmit.
我采用了之前的答案并使用实际的 CKEditor 对其进行了充实，以便您可以看到在提交之前需要做什么才能将 CKEditor 的内容复制到您的 textarea 中。
The key bits are this:
关键位是这样的：
CKEDITOR.on('instanceReady', function () {
$.each(CKEDITOR.instances, function (instance) {
CKEDITOR.instances[instance].document.on("keyup", CK_jQ);
CKEDITOR.instances[instance].document.on("paste", CK_jQ);
CKEDITOR.instances[instance].document.on("keypress", CK_jQ);
CKEDITOR.instances[instance].document.on("blur", CK_jQ);
CKEDITOR.instances[instance].document.on("change", CK_jQ);
});
});
function CK_jQ() {
for (instance in CKEDITOR.instances) {
CKEDITOR.instances[instance].updateElement();
}
}
Which I got from this answerto a different but similar question.
我从这个答案中得到了一个不同但相似的问题。
The other error you have is misspelling minlengthin your rules object.
您遇到的另一个错误是minlength规则对象中的拼写错误。
This is what it looks like working: http://jsfiddle.net/ryleyb/QcJ57/
这就是工作的样子：http: //jsfiddle.net/ryleyb/QcJ57/
回答by Mukesh Bhojwani
jQuery.validator.setDefaults({
ignore: [],
// with this no hidden fields will be ignored E.g. ckEditor text-area
});
I observed the validation was working on 2nd submit. The reason is, ckEditorhides the actual text area and puts an iframe as an editor instance, and on submit it pushes the content to the text area. Which means, the validation on the TextAreagets fired on stale data. To fix this problem, I am updating my TextAreaon the text change of the editor instance.
我观察到验证正在第二次提交。原因是，ckEditor隐藏实际的文本区域并放置一个 iframe 作为编辑器实例，并在提交时将内容推送到文本区域。这意味着，TextArea对陈旧数据的验证会被触发。为了解决这个问题，我正在更新TextArea编辑器实例的文本更改。
for (instance in CKEDITOR.instances) {
CKEDITOR.instances[instance].on('change', function ()
{
var editorName = $(this)[0].name;
CKEDITOR.instances[editorName].updateElement();
});
}
回答by DotNetLover
we can validate ckeditor using jquery validation by using the following piece of code.
我们可以使用以下代码来使用 jquery 验证来验证 ckeditor。
<input type="text" name="firstname" id="firstname"/>
<textarea name="editor1" id="editor1" rows="10" cols="80"></textarea>
$("#myForm").validate({
ignore: [],
rules:{
firstname:{
required:true
},
editor1: {
required: function(textarea) {
CKEDITOR.instances[textarea.id].updateElement();
var editorcontent = textarea.value.replace(/<[^>]*>/gi, '');
return editorcontent.length === 0;
}
}
},messages:{
firstname:{
required:"Enter first name"
}
}
});
for more information about validation click here http://www.dotnetqueries.com/Article/129/validate-ckeditor-using-jquery-form-validation.
有关验证的更多信息，请单击此处http://www.dotnetqueries.com/Article/129/validate-ckeditor-using-jquery-form-validation。
回答by Rohan Khude
Simple snippet worked for me.
简单的片段对我有用。
CKEDITOR.replace( 'textarea_input_name');
$( "#form_id" ).submit( function( e ) {
//in case, if didn't worked, remove below comment. This will get the textarea with current status
//CKEDITOR.instances.textarea_input_name.updateElement( );
var messageLength = CKEDITOR.instances['textarea_input_name'].getData( ).replace( /<[^>]*>/gi, '' ).length;
if( !messageLength )
{
alert( 'Please fill required field `Text`' );
//stop form to get submit
e.preventDefault( );
return false;
}
else
{
//editor is not empty, proceed to submit the form
return true;
}
} );
Hope this helps!!!
希望这可以帮助！！！
回答by aishwarya
Bydefault Ckeditor field is not validate using required rule. We have to create custom validator method for this -
默认情况下，不会使用必需规则验证 Ckeditor 字段。我们必须为此创建自定义验证器方法 -
jQuery.validator.addMethod('ckrequired', function (value, element, params) {
var idname = jQuery(element).attr('id');
var messageLength = jQuery.trim ( CKEDITOR.instances[idname].getData() );
return !params || messageLength.length !== 0;
}, "Image field is required");
And most importantly blank the ignore array -
最重要的是空白忽略数组 -
<script>
$(document).ready(function(){
$("#f3").validate({
ignore : [],
rules: {
cktext:{
ckrequired:true
}
}
});
});
</script>
Now you are all set.
现在你已经准备好了。
回答by Mani
Validate ckeditor with out jquery validation plugin...
使用 jquery 验证插件验证 ckeditor...
$("form").submit( function(e) {
var messageLength = CKEDITOR.instances['editor'].getData().replace(/<[^>]*>/gi, '').length;
if( !messageLength ) {
alert( 'Please enter a message' );
e.preventDefault();
}
});
回答by shemanov
Existing answers are good, they provide solutions for validation only on submit button, here some code for reactive validation of the ckeditor fields, like default jquery validation do.Put this on your ckeditor/config.js:
现有答案很好，它们仅在提交按钮上提供验证解决方案，这里有一些代码用于响应性验证 ckeditor 字段，就像默认的 jquery 验证一样。把它放在你的ckeditor/config.js 上：
CKEDITOR.on('instanceReady', function (e) {
var instance = e.editor;
instance.on("change", function (evt) {
onCKEditorChange(evt.editor);
});
//key event handler is a hack, cause change event doesn't handle interaction with these keys
instance.on('key', function (evt) {
var backSpaceKeyCode = 8;
var deleteKeyCode = 46;
if (evt.data.keyCode == backSpaceKeyCode || evt.data.keyCode == deleteKeyCode) {
//timeout needed cause editor data will update after this event was fired
setTimeout(function() {
onCKEditorChange(evt.editor);
}, 100);
}
});
instance.on('mode', function () {
if (this.mode == 'source') {
var editable = instance.editable();
editable.attachListener(editable, 'input', function (evt) {
onCKEditorChange(instance);
});
}
});
});
function onCKEditorChange(intance) {
intance.updateElement();
triggerElementChangeAndJqueryValidation($(intance.element.$));
}
function triggerElementChangeAndJqueryValidation(element) {
element.trigger('keyup');
}
Bonus: If you are using custom submit buttons and handlers for your form, now you don't need to explicitly callCKEDITOR.instances["yourtextarea"].updateElement();before sending form via ajax to your server.
奖励：如果您为表单使用自定义提交按钮和处理程序，现在您无需CKEDITOR.instances["yourtextarea"].updateElement();在通过 ajax 将表单发送到您的服务器之前显式调用。
Also dont forget to call:
也不要忘记打电话：
jQuery.validator.setDefaults({
ignore: []
});
My CKeditor: version:"4.5.4",revision:"d4677a3" Doc for ckeditor events: http://docs.ckeditor.com/#!/api/CKEDITOR.editor. It was hard to find right doc on this site.
我的 CKeditor: version:"4.5.4",revision:"d4677a3" ckeditor 事件的文档：http://docs.ckeditor.com/#!/api/CKEDITOR.editor 。在这个网站上很难找到合适的文档。
回答by Leonardo Delfino
You need to put a submit button in your form:
您需要在表单中放置一个提交按钮：
<input type="submit"/>
The form is only validate when is submitted.
表单仅在提交时进行验证。
Check example on this fiddle: http://jsfiddle.net/5RrGa/800/
检查这个小提琴的例子：http: //jsfiddle.net/5RrGa/800/
