Question

我正在使用WYSIWYG编辑器summernote。

我有一个textarea

＆＃13;

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

＆＃13;

和javascript：

＆＃13;

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

＆＃13;

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

名称无效的表单控件=＆＃39;数据[文字] [文字]＆＃39;不可专注。

Firefox不会抛出任何错误，但也没有表明输入是必需的。

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

Answer 1

我找不到添加属性required的文档，但最简单的方法是在表单中添加事件并检查编辑器isEmpty是否忘记删除required属性来自你的textarea

＆＃13;

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

＆＃13;

<!-- 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>

＆＃13;

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

1 个答案: