summernote textarea with attribute required does not work

Question

I am using the WYSIWYG Editor summernote.

I have a textarea

and a javascript:

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

As you can see the the textarea has the attribute required, but after I apply the summernote to the textarea, submitting an empty form throws a javascript message in chrome :

An invalid form control with name='data[Text][text]' is not focusable.

Firefox does not throw any error but also doesn't indicate that the input is required.

How can I force summernote to keep the required attribute?

Answer 1

I cannot found doc for adding attribute required but the easiest way is to add event to your form and check if editor isEmpty and don't forget to remove required attribute from your textarea

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