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

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

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

Take a look at the Indigo.Design sample applications to learn more about how apps are created with design to code software.

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