Can you trigger custom HTML5 form errors with JavaScript?

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.


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).