javascript - 具有所需属性的 summernote textarea 不起作用

Question

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

我有一个文本区域

<textarea name="data[Text][text]" rows="3" class="form-control" autofocus="autofocus" cols="30" id="TextText" required="required"></textarea>

和一个javascript:

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

如您所见，textarea 具有所需的属性，但在我将 summernote 应用到 textarea 之后，提交一个空表单会在 chrome 中抛出一条 javascript 消息:

An invalid form control with name='data[Text][text]' is not focusable.

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

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

Answer 1

我找不到用于添加属性 required 的文档，但最简单的方法是向表单添加事件并检查编辑器 isEmpty 并且不要忘记删除 需要 textarea 中的属性

$(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>