Validate CKEditor Fields Using JQuery

While working with CKEditor, I found that there is no inbuilt method for validation of editor field. In this article, I will let you know about the validation of field on which CKEditor has been applied.

Before moving straight on the code for that, It is important to include these three scripts on your page.

  1. JQuery-2.2.4.js
  2. JQuery.Validate.js
  3. CKEditor.js

We have HTML like –

I applied CKEditor on above textarea name as editor_image  –

SCRIPT FOR CKEDITOR

 

This variable obj can be changed according to your required configuration.

Then write the custom validator method to add the validation on the textarea field I have created the method i.e. ckrequired (you can name as of your choice) to validate the textarea name as editor_image –

SCRIPT FOR VALIDATION

Then write the validation rule for the text area as –

Note :  I changed the value of ignoring property which by default holds hidden value as CKEDITOR hides the textarea so jQuery validation doesn’t validate the element. So use –

Referential sites for more info –

  1. https://docs.ckeditor.com/ckeditor4/latest/guide/
  2. https://jqueryvalidation.org/
Please follow and like us:
20