需要屬性的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>