需要属性的summernote textarea不起作用

Question

我正在使用WYSIWYG编辑器summernote。

ICH有一个textarea的

<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的后，提交一个空的形式在铬抛出一个javascript消息：

的与名称=“数据[文字] [文本]”无效形式的控制不是可聚焦。

Firefox不抛出任何错误，但也显示不出来，输入需要

我怎么能强迫summernote保持所需要的属性？

Answer 1

我不能找到文档添加属性required但最简单的方法是将事件添加到您的形式和检查，如果编辑isEmpty，不要忘记从您的textarea删除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>