Can you trigger custom HTML5 form errors with JavaScript?

Question

If i have an input like <input type="text"> and i want to trigger a native error on the input, can you do that? Like (faux code) ele.triggerError('Error Message');

It would then look like:

_{(source: tylergaw.com)}

But with a custom message and for it's own validation function. Needed for AJAX validations for example.

Can you work with JQuery, JQuery Validation will do it for you — Emmanuel N
– Emmanuel N, Commented Dec 21, 2011 at 23:12
I want to trigger native errors. I can write a custom error no problem, but i want them all to match the browser and use HTML5 — Oscar Godson
– Oscar Godson, Commented Dec 21, 2011 at 23:19
Depending on HTML5 features is somewhat limiting since support is patchy and inconsistent across browsers. HTML5 isn't (and likely never will be) a standard, nor does it stand still since it's a "living specification". It's a combination of standards (i.e. W3C standards), legacy behaviour (i.e. DOM 0), current behaviour and proposed future features, but doesn't identify which is which. So anything using HTML5 should use feature detection with fallback to basic browser behaviour. — RobG
– RobG, Commented Dec 22, 2011 at 0:09
Yes. Ill have a polyfill for setCustomValidity and checkValidity which will basically do a normal "mark as red" on the input if invalid in, lets say, IE. I'd obviously never let the browser submit a form if it just didnt support HTML5 — Oscar Godson
– Oscar Godson, Commented Dec 22, 2011 at 0:13

Community · Accepted Answer · 2017-05-23 12:10:46Z

41

The only way to trigger the native error is to submit the form. Although you can set a custom message with setCustomValidity (as described in my answer here) and you can trigger the invalid event with checkValidity, this only provides hooks for you to create your own validation UI. Here's a simple example you can play around with to verify.

Note that if you submit the form with the submit() method that will bypass the validation API. But if you trigger the click event of the submit button that will work in Firefox and Opera, but not Chrome. I'd avoid doing it right now.

edited May 23, 2017 at 12:10

CommunityBot

11 silver badge

answered Dec 21, 2011 at 23:43

robertc

76k19 gold badges201 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Oscar Godson Over a year ago

Hmm, i modified the error message you have and it's not showing in FF or Chrome. I did "blanksssss" and it still just shows blank.

vulcan raven Over a year ago

I wonder when would the UAz let us handle the error balloon via JS? Its a basic requirement to submit the form via Ajax while keeping the default error handling model and having ability to alter the default invalid UI behavior (-moz-ui-invalid {box-shadow:color-of-my-choice;//other customizations}, ::-webkit-validation-bubble and its derivatives). Our next-generation pervasive HTML5 must include these features to keep UI consistent in cross-browser/cross-platform.

robertc Over a year ago

@JasonWilliams Why on earth would it need to look consistent cross-browser, how many of your site's users other than yourself are visiting in multiple browsers? It's more important that this stuff looks consistent cross-site than it does cross-browser or cross-platform.

vulcan raven Over a year ago

@robertc, honestly you don't know? First of all having the same on-error UI state with Ajax that we have without Ajax (standard form submission) would be nice. Secondly, more customization options and leaving UI decisions on webmaster's discretion would make more sense. Like we can customize the submit button, why shouldn't we be able customize the error bubble? For sake of an argument, why did stackoverflow's designer choose to style Add Comment button to look same on all browser given every browser has its own default style for a button?

robertc Over a year ago

@JasonWilliams HTML does not have selectors CSS does; but yes, that is my argument. I've no idea what the plans of the browsers are or why you've chosen the comments to my (correct) answer to express your own opinions on the matter. If you want to lobby for browsers or specs to add features then create a bug or subscribe to the mailing list.

|

Peter Umoren · Accepted Answer · 2019-12-06 08:33:59Z

26

You can now use the HTMLFormElement.reportValidity() method, at the moment it's implemented in Chrome, Firefox, Opera, and Android browsers, but not supported in Internet Explorer (check caniuse.com to see supported browsers).

edited Dec 6, 2019 at 8:33

answered Nov 5, 2017 at 6:22

Peter Umoren

5908 silver badges13 bronze badges

4 Comments

reiallenramos Over a year ago

+1 solved my problem. used reportValidity() on a return of document.forms[0].querySelector(':invalid') to trigger the UI messages by Chrome.

Maky Over a year ago

@reiallenramos or in jQuery sytax $('form').reportValidity();

sdo Over a year ago

It seems to work even at an input element without a form element: document.getElementById('field2').reportValidity();. I tested it just in Chromium.

Max Over a year ago

Yes @S.Doe, it's actually documented, the method seems available for both form and inputs: developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/…

Collectives™ on Stack Overflow

Can you trigger custom HTML5 form errors with JavaScript?

2 Answers 2

12 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related