Validate single/multiple ckeditor fields in a form

Today I came across a frustrating issue in which I had two textareas which I am using as a ckeditor in a given form. Now in my whole form, I am using HTML5 validations and all I wanted was to make all my fields compulsory. So, I thought adding the “required” attribute will do the trick and I’ll be on my way. But, required attribute worked everywhere except for the ckeditor fields.


Seeing this little roadblock I decided to checkout ckeditor’s documentation as they must have covered this basic requirement for their users( after all we are only asking for an HTML5 validation). After a lot of research, all I was able to find was this plugin which will do the trick.

I quickly jumped to the instructions and did what they said but it didn’t work as was promised. Now, I was losing patience and I did a few more tweaks to see if I could run this plugin but all in vain.

So, I decided to do the same in jquery. 

Now, I wanted to make sure that my code fulfils the following criteria

1.  Works on a page having more than one form. 
2.  Each form can have one or more ckeditors or none.
3.  Get input value of all ckeditors.
4.  Not all ckeditor fields are compulsory.
   

Here is a code of my typical ckeditor field

  
  <label>Field1*</label>
  <textarea  name="field1" class="form-control ckeditor "  rows="4" cols="50" id=”field1”></textarea>

I am using “ckeditor” class to initialize ckeditor plugin on my textareas.

So this is how I began

Step 1 -

Make the code work for more than one forms on that page

  $('form').submit(function(e){
    //logic
  });

Step 2 -

Each form can have one or more ckeditors or none. So, get all ckeditor fields in a particular form

  
  $('form').submit(function(e){
    var $ck_fields = $(this).find('.ckeditor');
  });

Step 3 -

Iterate over all ckeditors field so that we can validate them

  
  $('form').submit(function(e){
    var $ck_fields = $(this).find('.ckeditor');
    $.each($ck_fields, function( index, value ) {
    });
  });

Step 4 -

Not all ckeditor fields are compulsory therefore we need to provide that information to the loop above so that we may add validation logic to only the field which is required and not all ckeditors.

So let us use the developer friendly “data” attributes to get this information. For a field that we need to validate we will simply add data-required="true” to the textarea such that our HTML for ckeditor field changes to 

  <label>Field1*</label>
  <textarea  name="field1" class="form-control ckeditor "  rows="4" cols="50" id=”field1” data-required="true”></textarea>

Now we will use this data-attribute to add the condition to our logic

     
    $('form').submit(function(e){
      var $ck_fields = $(this).find('.ckeditor');
      $.each($ck_fields, function( index, value ) {
        if(value.getAttribute('data-required') == true){
          //logic            
        }
      });
    });

Step 5 -

Now it seems that we have reached where we want. One can simply think that we can use .val() to check whether the value of this field is set or not and show message accordingly.
But, there’s  a catch to access the value of a ckeditor field we have to use its inbuilt function getData() 
Ckeditor stores all its instances and we can specifically access an instance by using the name, id or class using which we had set it in the first place.


In the last tutorial, we had initiated all the ckeditors on a given site using the id attribute of each field. Thus, we will again require the id attribute to get the value of that field from ckeditor.

  $('form').submit(function(e){
    var $ck_fields = $(this).find('.ckeditor');
    $.each($ck_fields, function( index, value ) {
      if(value.getAttribute('data-required') == true){
        var $id = value.getAttribute('id');
        $val = CKEDITOR.instances[$id].getData();
        if($val == ''){
          e.preventDefault();              
          alert(’required');
        }
      }
    });
  });
  

Step 6 -

Now our code is running but we still want the user to know which field are we exactly talking about. In my case, I have a label attached to each field and will use this label to create a more helpful error message for the user.

    $('form').submit(function(e){
      var $ck_fields = $(this).find('.ckeditor');
      $.each($ck_fields, function( index, value ) {
        if(value.getAttribute('data-required') == true){
          var $name = $(this).siblings('label').text();
          var $id = value.getAttribute('id');
          $val = CKEDITOR.instances[$id].getData();
          if($val == ''){
            e.preventDefault();              
            alert($name.slice(0,-1)+' is required');
          }
        }
      });
    });

    //using slice because my label name have an asterisk attached to them and I want to remove it in error message