javascript - required attribute not working when submitting forms using submit() -
so have input fields in form this:
<input name="blotter_entry_nr" type="text" class="form-control" id="arrest" placeholder="enter blotter no." required>
i submitted form using following code:
//handle toolbar event $('#toolbarbutton').on('toolbaritemclick', function (event, buttonclicked) { var targetblock = $(event.target).parents('.article') // article var buttonclickedid = buttonclicked.id // id of button click switch (buttonclickedid) { case 'savebutton': $( "#case-report-form" ).submit(); break; case 'menu-remove': removearticle(targetblock) break; } }); //handle form submission $("#case-report-form").on('submit',(function(e){ e.preventdefault(); var formdata = new formdata(this); csr.submitform.submit(formdata); }));
the problem is, when dont provide input on required fields, submission still continue. try submit form using , , required attributes working.
can share his/her thoughts regarding this. thanks.
you submitting form via javascript, calling submit
method – , in case, possible invalid form state not supposed cancel form submission.
html5, 4.10.22.3 form submission algorithm, step 4:
if submitted submit() method flag not set, , submitter element's no-validate state false, interactively validate constraints of form , examine result: if result negative (the constraint validation concluded there invalid fields , informed user of this) fire simple event named invalid @ form element , abort these steps.
since using submit
method submit form, submitted submit() method flag is set, , therefor rest of step not apply – browser not supposed cancel submission process @ point, if form in invalid state. (in fact, browser not supposed run validation algorithm in case.)
you can check validity of form via script well, before call submit
method – that’s checkvalidity method for.
(you might want check if browser supports method though before calling – otherwise code break in browsers have not implemented yet.)
Comments
Post a Comment