CKEditor with jquery.validate

Question

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?

score 3 · Accepted Answer · answered Jul 25 '11 at 13:37

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

user3045072 · Answer 2 · 2013-12-26T09:22:11.017

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

Willem · Answer 3 · 2011-07-25T12:44:53.490

1

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

edited Jul 25 '11 at 12:44

answered Jul 25 '11 at 11:35

Willem

5,364
2
23
44

That was sort of my question - how do I find the thing I can add a red border around in the errorPlacement function. – Paul Tomblin Jul 25 '11 at 11:46
Your solution isn't great, because you're using a timeout instead of the errorPlacement function, and also you're assuming I only have one textarea on the screen and I know its id, and as I stated in the question I have multiples. But I think you're getting closer to what I need. – Paul Tomblin Jul 25 '11 at 12:53
your highlight solution is indeed better and cleaner, too bad I didn't think of that! – Willem Jul 27 '11 at 12:34
Well, since I've got to award the bounty to somebody and I can't award it to myself, why don't you add the highlight solution to your answer and I'll give you the bounty? – Paul Tomblin Jul 29 '11 at 11:57
Well, I wouldn't want to repeat your answer, but a bounty may also be rewarded to the person that helped you the most to get to the right solution. Since your own answer is marked as accepted people will read that first. My answer is only another solution that may or may not have helped you, I'll let you decide if it's worth the bounty. – Willem Jul 29 '11 at 12:52

score 1 · Answer 4 · edited May 23 '17 at 12:06

1

Take a look at these answers:

You'll essentially do something like the following:

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

edited May 23 '17 at 12:06

Community

1
1

answered Jul 25 '11 at 12:05

NakedBrunch

48,713
13
73
98

No, that doesn't answer the question. I already do that, and the validation fails. It just doesn't put a visual indication around the textarea that failed. – Paul Tomblin Jul 25 '11 at 12:12

CKEditor with jquery.validate

4 Answers4