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>

gaetanoM · Accepted Answer · 2017-08-28T19:23:20.220

7

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

edited Aug 28 '17 at 19:23

answered Aug 28 '17 at 18:39

gaetanoM

41,594
6
42
61

can you explain please, why should we add this code? What does this code mean? – Javid Abbasov Aug 28 '17 at 18:44
@JavidAbbasov Your textareas have the **required=""**. Upon CKEDITOR init this attribute goes away. Hence you need to set it up again. In jQuery you can write: $('#description').attr('required', ''); or if you want to do it for all **$('textarea').attr('required', '');** Let me know if it is not clear. – gaetanoM Aug 28 '17 at 18:46
Oh, thanks!!! Everything clear, but there is still one little problem. When the error shows in other inputs and when I type something it removes automatically. But in textareas it does not leave https://yadi.sk/i/qEFXPqsi3MQ4PV . – Javid Abbasov Aug 28 '17 at 18:52
@JavidAbbasov Answer and [fiddle](https://jsfiddle.net/wcte344u/3/) updated. The problem is: you need to trigger parsley validation withing ckeditor change event. Let me know. Thanks – gaetanoM Aug 28 '17 at 19:19

score 1 · Answer 2 · answered Aug 28 '17 at 18:12

It's always so much easier to answer questions if you provide a minimal working example...

ckeditor hides the <textarea> and fills it in via Javascript.

Maybe the issue is that the error container is in the wrong place.

It's also very possible that ckeditor doesn't trigger the input event (not very well known). If that's the case, the following code should resolve the issue:

$('textarea').on('change', function() { $(this).trigger('input') })

Please update if this works or not.

parsley.js does not work for ckeditor textarea

2 Answers2