Jqueryvalidation不与ckeditor一起使用

我正在使用jQuery来validation表单..但是当我使用CKeditor并尝试使用jQueryvalidation它时，它不起作用。

这是HTML代码的片段

 
  
 Submit  

这是表单validation代码

   $(document).ready(function(){ $("#f3").validate( { debug: false, rules: { cktext:{ required:true, minlenght:10 } } }); });  

仅供参考：为其他表单字段工作的jqueryvalidation期望ckeditor textarea提交

任何建议..摆脱这个问题..

Answer 1

最后我找到了问题的答案……

我更改了默认保持的ignore属性的值：隐藏值。 因为CKEDITOR隐藏textarea jQueryvalidation不validation元素：

  ignore: [] 

我刚刚更改了validation脚本，如下所示。

  $(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片段是

  
 
  
 Submit  

正如我在这里找到了这个答案

谢谢大家…

Answer 2

我采用了前面的答案并用实际的CKEditor对其进行了充实，以便您可以看到在提交之前需要将CKEditor的内容复制到textarea中。

关键点是这样的：

 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(); } } 

我从这个答案得到了一个不同但相似的问题。

您遇到的另一个错误是在规则对象中拼写错误的minlength 。

这就是它的工作方式： http ： //jsfiddle.net/ryleyb/QcJ57/

Answer 3

 jQuery.validator.setDefaults({ ignore: [], // with this no hidden fields will be ignored Eg ckEditor text-area }); 

我观察到validation正在进行第二次提交。 原因是， ckEditor隐藏了实际的文本区域并将iframe作为编辑器实例，并在提交时将内容推送到文本区域。 这意味着， TextArea上的validation会被陈旧数据触发。 要解决此问题，我正在更新编辑器实例的文本更改我的TextArea 。

  for (instance in CKEDITOR.instances) { CKEDITOR.instances[instance].on('change', function () { var editorName = $(this)[0].name; CKEDITOR.instances[editorName].updateElement(); }); } 

Answer 4

我们可以使用以下代码使用jqueryvalidation来validationckeditor。

   $("#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" } } }); 

有关validation的更多信息，请单击此处http://www.dotnetqueries.com/Article/129/validate-ckeditor-using-jquery-form-validation 。

Answer 5

您需要在表单中放置一个提交按钮：

表单仅在提交时进行validation。

检查这个小提琴的例子： http ： //jsfiddle.net/5RrGa/800/

Answer 6

现有答案很好，它们仅在提交按钮上提供validation解决方案，这里有一些ckeditor字段的反应validation代码，如默认的jqueryvalidation。 把它放在你的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'); } 

额外奖励 ：如果您正在为表单使用自定义提交按钮和处理程序，现在您不需要显式调用 CKEDITOR.instances["yourtextarea"].updateElement(); 在通过ajax将表单发送到您的服务器之前。

也别忘了打电话：

 jQuery.validator.setDefaults({ ignore: [] }); 

我的CKeditor：版本：“4.5.4”，修订版：“d4677a3”ckeditor事件的文档： http ：//docs.ckeditor.com/#！/ api / CKEDITOR.editor。 在这个网站上很难找到合适的文档。

Answer 7

简单的片段为我工作。

 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; } } ); 

希望这可以帮助！！！

Answer 8

Bydefault Ckeditor字段未使用所需规则进行validation。 我们必须为此创建自定义validation器方法 –

 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"); 

而最重要的是空白忽略数组 –

现在你已经准备好了。