17

When we try to submit the HTML5 form, it prevents the form submission if one or more required fields are missing the value or some other error occurred (type or length mismatch). The UI is updated with highlighted invalid fields and the first invalid field is focused. Moreover, there is a balloon/bubble attached to the first invalid field with an error message.

Now, if its an Ajax form, we call myForm.checkValidity() to confirm the errors before dispatching the Ajax call. But on calling checkValidity(), it doesn't effect the UI with invalid fields highlighted and with bubble attached.

Is there a way to call the browser's native behavior for validation, so we can see the balloon along with the invalid fields highlighted and focused?

robertc
  • 74,533
  • 18
  • 193
  • 177
vulcan raven
  • 32,612
  • 11
  • 57
  • 93
  • OK, well reading the W3C spec, what you're asking for I think is a way to programmatically do what they call, "interactively validate the constraints" of a form. There does not appear to be any API (a standard one anyway) for doing that. The spec only says it's triggered by an interactive "submit" element (like a "submit" button). – Pointy Jul 08 '12 at 16:15
  • 1
    possible duplicate of [Can you trigger custom HTML5 form errors with JavaScript?](http://stackoverflow.com/questions/8597595/can-you-trigger-custom-html5-form-errors-with-javascript) – robertc Jul 08 '12 at 20:34
  • 1
    You can check [this page](http://www.useragentman.com/blog/2012/05/17/cross-browser-styling-of-html5-forms-even-in-older-browsers/) for HTML5 forms with custom balloons and polyfill for older browsers. You need to spend some time to get a break through and be able to submit the form via Ajax. Totally interactive with consistent errors UI. – vulcan raven Jul 08 '12 at 22:04

2 Answers2

10

Simply trigger an actual form submission - http://jsfiddle.net/tj_vantoll/ZN29S/.

An actual form submission will run checkValidity, show the bubble errors, call invalid event handlers as necessary, etc.

To ensure that the form doesn't actually submit you simply need to attach a submit event handler to the <form> that prevents the default action, then do the AJAX call.

This works because the submit event will not be fired unless a form has been met all of its constraints (i.e. has valid data). Therefore an explicit call to checkValidity isn't necessary.

Edit (11/7/12) to addresses comments.

By an actual form submission in this case I was simply referring to a non-AJAX submission done with a submit button. To get the native bubble to display and the focus to change to the appropriate form element this is the only way to accomplish this. If there is no submit button present you can make a hidden one and use that to trigger the submission; it will still work.

I would agree that this approach is less than ideal but it does work in all supporting browsers. The only reason this hack is used rather than calling form.submit() is because form.submit() does not trigger the native validation. To me the issue here is not that there is no API to trigger the validation, but rather that calling form.submit() does not. The spec says that constraint validation should be run whenever "the user agent is required to statically validate the constraints of form element form". I do not know why calling form.submit() would not apply.

It should be noted that checkValidity DOES run through the same algorithm as a native form submission. Therefore you are free to turn off the default bubbles and implement your own. For example something like this.

TJ VanToll
  • 12,584
  • 4
  • 43
  • 45
  • This answer would be better if you explained what you meant by "trigger an actual form submission," and how it's different from `formEl.submit()`. Also, what would a solution be if the form doesn't have a submit button? – Domenic Nov 06 '12 at 04:08
  • @Domenic, its an interesting point. I've tested on FF16 and IE10. It seems like the UI is updated only when submit button is clicked (by user or script). I think it must call the same method for validation on `$('form').submit()` which updates the UI. – vulcan raven Nov 06 '12 at 06:00
  • @Domenic Yeah I wrote that answer up pretty quickly. I edited to hopefully address your comments. – TJ VanToll Nov 07 '12 at 13:57
  • 1
    For new readers, there is [another way](https://stackoverflow.com/a/59427332/476716) – OrangeDog Dec 20 '19 at 15:02
6

Time has moved on since 2012 and there is now a reportValidity() method.

The HTMLFormElement.reportValidity() method returns true if the element's child controls satisfy their validation constraints. When false is returned, cancelable invalid events are fired for each invalid child and validation problems are reported to the user.

Further details at MDN.

This works in Chrome (40+), Edge (17+), Firefox (49+), Opera and Safari, but not IE.

OrangeDog
  • 36,653
  • 12
  • 122
  • 207