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 隐藏 <textarea> 并通过 Javascript 填充它。

可能是错误容器放错了地方。

也很有可能 ckeditor 没有触发 input 事件（不太为人所知）。如果是这种情况，以下代码应该可以解决问题：

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

请更新是否可行。

Answer 2

您的问题与 required 属性有关。之后，这一行：

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 change事件上，你需要触发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();
            }
        });
    });
});

parsley.js 不适用于 ckeditor textarea

parsley.js does not work for ckeditor textarea

javascript

jquery

parsley.js