Question

我在使用jquery.validate的页面上有一些textareas。我将CKEDITOR添加到那些textareas，现在测试人员抱怨说，当他们发出错误时，验证器警告他们有错误（因为我在调用它之前在编辑器上执行updateElement），但是textareas没有得到再一个红色边框。有办法解决这个问题吗？有没有办法在errorPlacement函数中找到CKEDITOR实例？

Answer 1

我发现我正在使用errorPlacement咆哮错误的树。相反，我添加了一个高亮和非高亮功能：

      errorPlacement: function(error, element)
      {
        $(element).parent('div').prev().append(error[0]);
      },
      highlight: function(element, errorClass, validClass)
      {
        $(element).parent().addClass(errorClass).removeClass(validClass);
      },
      unhighlight: function(element, errorClass, validClass)
      {
        $(element).parent().addClass(validClass).removeClass(errorClass);
      }

Answer 2

Ckeditor隐藏textarea（display:none）并将其替换为带有可编辑内容的iframe。我认为您应该尝试让验证触发一个函数，如果无效，则为iframe提供红色边框。

我在这里写了一个小的工作示例：http://jsfiddle.net/5wJVu/1/（在firefox中工作，但我剥离了cke-IE支持这个小例子，所以可能在IE中不起作用...）

 $("#submit").click(function(){
     for (var i in CKEDITOR.instances) {
        CKEDITOR.instances[i].updateElement();// to update the textarea
     }
     // setTimeout to let the validation complete first 
     // and then check for the .error classname.
     setTimeout(function(){
         var ta=$("#ckeditor");
         var cke=$("#cke_ckeditor");
         if (ta.hasClass('error') ){cke.addClass('error')}
         else{cke.removeClass('error')}
     },300);
     return true;
});

Answer 3

看看这些答案：

您基本上会执行以下操作：

<script type="text/javascript">
function validate_editor() {
    CKEDITOR.instances.content.updateElement();
}
</script>

Answer 4

这应该可以解决问题：

jQuery(function($){
  $("#cms-form").validate({
    event: 'blur',
    rules: {
      title: {required: true},
      content: {
        required: function(textarea) {
          CKEDITOR.instances[textarea.id].updateElement(); // update textarea
          var editorcontent = textarea.value.replace(/<[^>]*>/gi, ''); // strip tags
          return editorcontent.length === 0;
        }
      }
    }
  });
});

带有jquery.validate的CKEditor

4 个答案: