javascript - parsley.js 不适用于 ckeditor textarea

Question

我用 parsley.js 验证器为我的表单编写了代码，但是它工作正常，除了 CKEditor textareas。问题出在哪里？这是截图

这是我的代码:

<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

您的问题与必需 属性有关。之后，这一行:

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

您需要为每个文本区域再次添加这样的属性，因为在 CKEDITOR 初始化阶段丢失了(即:CKEDITOR.replace('purpose');)。

对于特定的文本区域，您可以这样写:

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

对于属于表单的所有文本区域:

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

来自您的评论:

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

为了解决这部分，在 CKEDITOR 更改事件上，您需要触发 parsley 验证。下面一行就可以了:

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

更新后的代码(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();
            }
        });
    });
});