Question

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

以下是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>

这是表单验证码

    <script>
           $(document).ready(function(){
           $("#f3").validate(
            {
              debug: false,
                rules: { 
                    cktext:{

                     required:true,
                     minlenght:10
                    }
                 }
            });
        });
      </script>

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

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

Answer 1

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

我更改了默认保存的ignore属性的值：隐藏值。因为CKEDITOR隐藏textarea jQuery验证不验证元素：

   ignore: []

我刚刚更改了验证脚本..

     $(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代码段

   <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

中找到了这个答案

感谢所有......

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

我从this answer得到了一个不同但相似的问题。

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

这就是它的工作原理：http://jsfiddle.net/ryleyb/QcJ57/

Answer 3

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

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

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

Answer 4

我们可以使用以下代码验证使用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"
        }

     }
   });

有关验证的详情，请点击此处http://www.dotnetqueries.com/Article/129/validate-ckeditor-using-jquery-form-validation。

Answer 5

不使用jquery验证插件验证ckeditor ...

$("form").submit( function(e) {
      var messageLength = CKEDITOR.instances['editor'].getData().replace(/<[^>]*>/gi, '').length;
      if( !messageLength ) {
          alert( 'Please enter a message' );
          e.preventDefault();
       }
 });

Answer 6

您需要在表单中添加一个提交按钮：

<input type="submit"/>

表单仅在提交时验证。

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

Answer 7

现有答案很好，它们仅在提交按钮上提供验证解决方案，这里有一些代码用于 ckeditor字段的反应性验证，例如默认的jquery验证。将它放在 ckeditor上/config.js：

body,
html {
  width: 100%;
  height: 100%;
}

#splitter {
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  padding:3px;
  background: grey;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

#one,
#two {
  width: 50%;
  height: 100%;
  max-width: 90%;
  min-width: 10%;
  background: orange;
}

#two {
  background: green;
}

#nested {
  width: auto;
  height: calc(100% - 6px);
  margin:3px;
  background: black;
}

奖励：如果您使用表单的自定义提交按钮和处理程序，现在在发送之前不需要明确调用 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'); }通过ajax将表单发送到您的服务器。

也别忘了打电话：

CKEDITOR.instances["yourtextarea"].updateElement();

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

Answer 8

简单的代码段为我工作。

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 9

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

最重要的是将忽略数组空白 -

<script>
$(document).ready(function(){
    $("#f3").validate({
        ignore : [],
        rules: {
        cktext:{    
            ckrequired:true
        }
    }
            });
        });
      </script>

现在你已经准备好了。

Answer 10

在初始化ckeditor时：

CKEDITOR.on('instanceReady', function () {
        for (var i in CKEDITOR.instances) {
            CKEDITOR.instances[i].on('change', function () {
                this.updateElement();
            });
        }
    });

也不要忘记在验证插件初始化时调用它们：

ignore: []

但是最重要的一点似乎是无关紧要的是，required class应该放在文本区域输入中

Answer 11

在 ckeditor5 中，您不能只是自动获取数据。您必须使用他们的函数来获取数据，以下是用于使用 jquery 验证 ckeditor5 的源代码。

/// 仅当页面中没有 ckeditor5 文本框并且想要将 textbx 初始化为特定 id 时才需要以下代码，例如 id="#content"

 var editorTextarea;
    ClassicEditor
        .create (document.querySelector ('#content'))
        .then (editor => {
           editorTextarea = editor;
        })
        .catch (error => {
            console.error (error);
        });

/ ** This way I invoke validations, where "content" is the name of my textarea: 
 <div class="form-group">
        <textarea name="content" id="content"><?= $data["page"]->content;?></textarea>
    </div>
** /


// if have already intialized the ckeditor5 textbox than you just have to replace **editorTextarea** to with your editor name
$ .validator.addMethod ("ck_editor", function () {
       var content_length = editorTextarea.getData (). trim (). length;
       return content_length> 0;
   }, "Please insert content for the page.");



   $ ("# form_page_edit"). validate ({

       ignore it:[],
       rules: {
           title: {
               required: true,
               minlength: 6,
               maxlength: 255
           },
           url: {
               required: true,
               minlength: 6,
               maxlength: 255
           },
           content: {
               ck_editor: true
           }
       }
   });

这可以帮助您使用 jquery 验证来验证 ckedior5

Answer 12

像下面这样对我有用。我添加了“return”。

rules : {
    subject: {
        required: true
    },
    description: {
        required: function()
        {
            return CKEDITOR.instances.description.updateElement();
        },
    }
}

Jquery验证不与ckeditor一起使用

12 个答案: