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.

Answer 1

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.