必須の属性を持つsummernote textareaは機能しません。

Question

私はWYSIWYGエディタsummernoteを使用しています。あなたがテキストエリアには目を持って見ることができるように

のIchは、テキストエリア

<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']], 
 
    ] 
 
    }); 
 
});

を持っていますE属性が必要ですが、私はテキストエリアにsummernoteを適用した後、空のフォームを提出することはクロームではJavaScriptメッセージをスロー：名=「データ[テキスト] [テキスト]」と

無効なフォームコントロールがフォーカス可能ではありません。

Firefoxがエラーをスローしませんが、また入力がどのように私は必要な属性を維持するためにsummernoteを強制することができ

に必要であることを表示されませんか？

Answer 1

することは私には属性requiredを追加するためのドキュメントを見つけることはできませんが、最も簡単な方法は、エディタisEmptyとは、あなたのテキストエリアから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>