parsley.js does not work for ckeditor textarea

Question

I wrote code for my form with parsley.js validator, however it works fine except CKEditor textareas. Where can be the problem? Here is screenshot

Here is my code:

<script type="text/javascript">
 CKEDITOR.on('instanceReady', function(){
      $.each( CKEDITOR.instances, function(instance) {
        CKEDITOR.instances[instance].on("change",function(e) {
          for ( instance in CKEDITOR.instances)
          CKEDITOR.instances[instance].updateElement();
        });
      });
  });
</script>

<h2 class="heading">Description</h2>
<div class="controls">
  <textarea name="description" id="description" required="" data-parsley-errors-container="#description-errors" data-parsley-required-message="Это поле необходимо!"></textarea>
</div>
<div style="margin-bottom: 20px;" id="description-errors"></div>

<script>
  CKEDITOR.replace('description');
</script>

<h2 class="heading">Purpose</h2>
<div class="controls">
  <textarea name="purpose" id="purpose" required="" data-parsley-errors-container="#purpose-errors" data-parsley-required-message="Это поле необходимо!"></textarea>
  <div style="margin-bottom: 20px;" id="purpose-errors"></div><br><br>
  <button type="submit" name="submit">Submit</button>
</div>


<script>
  CKEDITOR.replace('purpose');
</script>

Answer 1

Your issue is related to the required attribute. After, this line:

CKEDITOR.on('instanceReady', function () {

you need to add such an attribute again, for each text area, because lost during CKEDITOR init phase (i.e.: CKEDITOR.replace('purpose');).

For a specific textarea you can write:

$('#description').attr('required', '');

For all the textareas belonging to the form:

$('form textarea').attr('required', '');

From your comment:

When the error shows in other inputs and when I type something it removes automatically. But in textareas it does not leave

In order to solve this part, on CKEDITOR change event, you need to trigger parsley validation. The below line does the trick:

$('form').parsley().validate();

The updated code (jsfiddle here):

CKEDITOR.on('instanceReady', function () {
    $('form textarea').attr('required', '');
    $.each(CKEDITOR.instances, function (instance) {
        CKEDITOR.instances[instance].on("change", function (e) {
            for (instance in CKEDITOR.instances) {
                CKEDITOR.instances[instance].updateElement();
                $('form').parsley().validate();
            }
        });
    });
});