具有 required 属性的summernote textarea 不起作用答案

【问题标题】：summernote textarea with attribute required does not work具有 required 属性的summernote textarea 不起作用
【发布时间】：2018-01-23 11:48:53
【问题描述】：

我正在使用所见即所得编辑器summernote。

我有一个文本区域

&lt;textarea name="data[Text][text]" rows="3" class="form-control" autofocus="autofocus" cols="30" id="TextText" required="required"&gt;&lt;/textarea&gt;

和一个javascript：

$(document).ready(function() {
  $('#TextText').summernote({
    height: 250,
    toolbar: [
      ['style', ['bold', 'italic', 'underline', ]],
      ['para', ['ul', 'ol', 'paragraph']],
    ]
  });
});

如您所见，textarea 具有所需的属性，但在我将 Summernote 应用于 textarea 后，提交一个空表单会在 chrome 中引发一条 javascript 消息：

name='data[Text][text]' 的无效表单控件不可聚焦。

Firefox 不会抛出任何错误，但也不表示需要输入。

如何强制summernote保留所需的属性？

【问题讨论】：

标签： javascript jquery validation required summernote

【解决方案1】：

我找不到添加属性required 的文档，但最简单的方法是将事件添加到您的表单并检查编辑器是否isEmpty 并且不要忘记从您的文本区域中删除required 属性

$(document).ready(function() {
  $('#TextText').summernote({
    height: 250,
    toolbar: [
      ['style', ['bold', 'italic', 'underline', ]],
      ['para', ['ul', 'ol', 'paragraph']],
    ]
  });
});

$('#myForm').on('submit', function(e) {
  
  if($('#TextText').summernote('isEmpty')) {
    console.log('contents is empty, fill it!');

    // cancel submit
    e.preventDefault();
  }
  else {
    // do action
  }
})

<!-- include libraries(jQuery, bootstrap) -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>

<!-- include summernote css/js-->
<link href="//cdnjs.cloudflare.com/ajax/libs/summernote/0.8.7/summernote.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/summernote/0.8.7/summernote.js"></script>

<form action="/action_page.php" id="myForm">
  <textarea name="data[Text][text]" rows="3" class="form-control" autofocus="autofocus" cols="30" id="TextText"></textarea>
  <input type="submit">
</form>

【讨论】：