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（＆＃39;目的＆＃39;）;）。

对于特定的textarea，您可以写：

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

对于属于该表格的所有textareas：

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

来自你的评论：

当错误显示在其他输入中时，当我输入内容时，它会自动删除。但在textareas它不会离开

为了解决这个问题，在CKEDITOR更改事件中，您需要触发欧芹验证。以下行就是诀窍：

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

Answer 2

如果您提供最小的工作示例，那么回答问题总是容易得多......

ckeditor隐藏<textarea>并通过Javascript填写。

可能问题是错误容器位于错误的位置。

ckeditor也很可能不会触发input事件（不太知名）。如果是这种情况，以下代码应解决此问题：

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

如果有效，请更新。

parsley.js不适用于ckeditor textarea

2 个答案: