summernote: HTML5 validation with required doesn't show error
steps to reproduce
- Create `<textarea name="source" required="required"></textarea>
- Bind summernote.
- Send form without filling editor.
browser version and os version and summernote version
What is your browser and OS? All HTML5 validation enabled browsers What is your summernote version? 0.8.8
problem description
When textarea was defined as required, HTML5 validation fails without any notification when editor is not filled. This is caused because HTML5 validation is triggered on source <textarea style="display: none;"> which is not focusable. You can read Chrome error in console:
An invalid form control with name='source' is not focusable.
TODO:
- When source textarea is marked as
required– remove it from source element and add it to target textarea element.
but it won’t solve problem
textarea.note-codableis also not focusable! So even if you rewriterequiredattr by hand –it won’t show up for Summernote editor.
Similar implementation from other editor: https://github.com/ckeditor/ckeditor-dev/commit/385a822
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 1
- Comments: 16 (13 by maintainers)
+1
use: $(‘#Post’).summernote(‘isEmpty’) || $($(“#Post”).summernote(“code”)).text().trim() == ‘’
Exemple:
$(‘.btn-create’).on(‘click’, function () { var submeterForm = 1; if ($(‘#Post’).summernote(‘isEmpty’) || $($(“#Post”).summernote(“code”)).text().trim() == ‘’) { submeterForm = 0; } if (submeterForm <= 0) { $(‘span[data-valmsg-for=“Post”]’).text(“* Input Required!”); } else { $(‘#form-post’).submit(); } });
Finally, I got your point, @DiemenDesign. I’ll consider it. I wanted to prevent to get an error from
requiredattribute, basically.I wonder what data the required attribute forces the browser to look for? Is it just any data, or is it like an input, depends on the type to compare the type of data entered. I’m thinking if textarea the browser just checks if any data is present that we can just check if there’s any data, apart from what’s placed in the empty area by default, then capture the submit action and check. I’m just not sure how the default behaviour for required actions can be done.
I think we have to override attributes (including
required) from the source element. And it should show errors as same as the source.