使用 Parsley 验证 Summernote 文本区域答案

【问题标题】：Validating Summernote textarea with Parsley使用 Parsley 验证 Summernote 文本区域
【发布时间】：2017-08-28 21:39:43
【问题描述】：

我已经使用 Parsley 验证器有一段时间了，我对它非常满意。不过，我遇到了一些麻烦，我真的想不通。

问题是这样的：我的 textarea 被 Summernote 替换了，没有验证。让我先澄清一下，因为我知道问题出在哪里，但我想不出答案。

在我的 CMS 中，用户可以通过 Summernote 编辑页面的文本。加载页面后，文本将出现在编辑器中。在查看我的源代码时，我看到了：

<textarea name="content" class="summernote" required data-parsley-required>[The page information is shown, but I removed it because it it too long and unrelated to this topic.]</textarea>

当我编辑文本时，它会正常验证。但！当我删除我的文本并在编辑器为空时提交表单时，它也会验证。它只是处理表单，当页面重新加载时，它不会显示任何文本。逻辑上 textarea 字段为空。

这里的问题是当页面加载并且 textarea 有内容时，textarea 的验证会看到它不为空，从而提交我的表单。相反，我想验证 ACTUAL 文本区域，其中类名是 note-editable。

当文本编辑器为空时，它总是说它是空的。即使我在编辑器中放了一些文本，它也不会提交，只是因为在页面加载时，文本区域没有内容。

所以我的问题是：当我使用 Summernote 时，如何防止用户使用 Parsley 提交空文本字段？因此，当用户从编辑器中删除文本时，表单将不会提交，并且用户会收到错误消息，指出文本字段为空。

非常感谢！

~米歇尔

【问题讨论】：

我也有同样的问题。你搞清楚了吗？

标签： jquery validation summernote parsley

【解决方案1】：

我制作了这个对我有用的简单自定义函数。

<textarea id="mySummernote" name="mySummernote" data-parsley-summernote-required="" data-parsley-errors-container="#myErrors"></textarea>
<div id="myErrors"></div>
<script type="text/javascript">
    window.Parsley.addValidator('summernoteRequired', {
      validateString: function(value,_value,_el) {
        var val = $($(_el.$element[0]).val()).text().trim();
        if(val.length<1) return false; 
      },
      messages: {
        en: 'This is a required field.',
        it: "Questo valore è richiesto."
      }
    });
</script>

希望这对您有所帮助。 :)

【讨论】：