jQuery验证不适用于ckeditor

jQuery的 Ckeditor

Gil伽罗小宇宙

2020-12-15

我正在使用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,
                     minlength: 10
                    }
                 }
            });
        });
      </script>

仅供参考：适用于其他表单字段的jQuery验证需要ckeditor textarea字段

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

第4276篇《jQuery验证不适用于ckeditor》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答

王者一打九 2020.12.15

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

<input type="submit"/>

该表单仅在提交时验证。

在此提琴上检查示例：http : //jsfiddle.net/5RrGa/800/

6的不行 2020.12.15

我们可以通过以下代码使用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。

Me无敌 2020.12.15

终于我找到了问题的答案...

我更改了ignore属性的值，该属性默认情况下包含：hidden值。因为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>