CKEditor with jquery.validate

I had some textareas on a page that used jquery.validate. I added CKEDITOR to those textareas, and now the testers are complaining that when they make an error, the validator warns them that there is an error (because I do an updateElement on the editors before calling it), but 开发者_如何转开发the textareas don't get a red border any more. Is there a way to fix that? Is there a way to find the CKEDITOR instance in the errorPlacement function?

I've discovered I was barking up the wrong tree using errorPlacement. Instead, I added a highlight and unhighlight function:

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

Take a look at these answers:

• Using jQuery to grab the content from CKEditor's iframe
• using CKEditor with jQuery validation plugin not working

You'll essentially do something like the following:

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

Ckeditor hides the textarea (display:none) and replaces it with an iframe with editable content. I think you should try to let the validation trigger a function that gives the iframe a red border if invalid.

I wrote a small working example here: http://jsfiddle.net/5wJVu/1/ (works in firefox, but I stripped the cke-IE-support for this small example so might not work in 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;
});

That should solve the problem:

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