summernote textarea with attribute required does not work

Question

I am using the WYSIWYG Editor summernote.

I have a textarea

<textarea name="data[Text][text]" rows="3" class="form-control" autofocus="autofocus" cols="30" id="TextText" required="required"></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?

ewwink ewwink · Accepted Answer · 2017-08-15T14:55:39

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>

summernote textarea with attribute required does not work

1 Answers