需要属性的summernote textarea不起作用
问题描述:
我正在使用WYSIWYG编辑器summernote。需要属性的summernote textarea不起作用
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保持所需要的属性?
答
我不能找到文档添加属性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>