Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Using the jQuery Validate Plugin with CKEditor

DZone's Guide to

Using the jQuery Validate Plugin with CKEditor

· Web Dev Zone ·
Free Resource

Access over 20 APIs and mobile SDKs, up to 250k transactions free with no credit card required

Just a quick post (mostly for my own reference!) on using the jQuery validate plugin to check that a CKEditor instance has content. The problem occurs when CKEditor replaces the HTML textarea tag with a WYSIWYG editor and the jQuery validate plugin validates against the textarea and not the content of the WYSIWYG editor.

The solution is quite simple. Just use the updateElement() method of the CKEditor instance to populate the hidden textarea before you do the validation.

Here's some code to demonstrate:

<form id="cms-form">
  Title (required):<br>
  <input type="text" name="title" id="title" placeholder="Title"><br>
  
  <!-- this textarea will be replaced by a CKEditor instance -->
  Content (required):<br>
  <textarea name="content" id="content" placeholder="Content" class="ckeditor"></textarea>
</form>

<script>
jQuery(function($){
  $("#cms-form").validate({
    event: 'blur',
    rules: {
      title: {required: true},
      content: {required: true}
    }
  });
});
</script>

All you need to do is to replace the line:

content: {required: true}

With a callback so you get something like this:

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

#1 for location developers in quality, price and choice, switch to HERE.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}