In the previous example, the browser provides default validation error messaging in a dialog balloon. However, you can customize that experience if you prefer.
One way you can customize is to provide your own error message text. In the form here, a custom error message on the birth year field is shown if the value entered is greater than 1997. The birth year field now has an onchange
event handler which checks if the value is greater than the max value. If it is greater, then a custom validity message "You must be at least 14 years old to use this site" is set, otherwise the custom validity message is cleared.
The custom message, if any, will be shown to the user when they try to submit the form.
Another way to customize the error experience is to modify how you notify users of errors. By preventing the default action on the oninvalid
event for each element, you can cancel the default dialog balloon. You can
then provide your own display method and message.
For the user name, password and email fields in the form below, the balloon notification is blocked, and the error text is written directly to the page.