How to set custom validation messages for HTML forms?

html

form-validation

javascript

html5

byAnton Shumikhin·Feb 21, 2025

To implement setCustomValidity for tailored validation messages, bind it to an input's event listener paired with appropriate checks.

Example:

document.querySelector('#myInput').oninvalid = function(e) {
    // Folks, let's play nice: only valid inputs allowed!
    e.target.setCustomValidity(e.target.validity.patternMismatch ? 'Please match the requested format.' : '');
};

This example latches onto oninvalid event, examines if there's a pattern mismatch, and employs a custom validation message. The message resets once the input becomes valid.

Understanding HTML5 Form Validation

The HTML5 form validation system provides inherent client-side validation. Start with pattern and required attributes for basic validation, then level up with JavaScript.

Custom feedback with setCustomValidity

The setCustomValidity method allows for in-depth error messages. It accepts a string argument, which turns into the input's validation message when the form constraints aren't met.

Stay dynamic with oninvalid and oninput events

Merge oninvalid events for quick response and oninput to clear any error messages as soon as the user starts rectifying the input:

inputElement.oninvalid = function(event) {
    // Attention! Custom error cable is plugged in.
    event.target.setCustomValidity('Custom error message');
};
inputElement.oninput = function(event) {
    // Phew! All clear. Standing down.
    event.target.setCustomValidity('');
};

Keep code clean with 'this' keyword

Use this inside the event handlers to tidy your JavaScript code by directly referring to the affected input element.

Get visual with placeholders

Use placeholder attributes to provide a hint about the expected input format to the user before validation occurs.

Input types deserve love too

Apply setCustomValidity on various input types, including password fields, to offer a consistent user experience across your form.

Advanced scenarios and common pitfalls

Consistent validation across browsers

Various browsers may treat validation messages differently — a compelling reason to inspect the cross-browser behavior and find a solution that works universally.

Clearing your tracks with custom messages

When your custom messages have been served, make sure your script clears any leftovers. This can prevent any confusion when the validation state changes during the user experience.

Customizing validation messages

For browser-specific implementations like Firefox's x-moz-errormessage, remember that these may not be future-proof and can evolve over time.

Power of Constraint Validation API

The Constraint Validation API is a powerhouse when it comes to customizing validation behaviour. To wield it effectively, you must review its documentation thoroughly.

The importance of practice

Using a jsfiddle or similar online editor, test and perfect your form validation messages in a live setting.

Error Scenarios

For incorrect email formats: "Whoops! 🧙‍♂️ '@' and a domain (like [email protected]) is the correct format."
If a password is too weak: "Secure your account! Ensure your password includes a number 🧮, an uppercase 🅰️, and a special character 🔣."

Potential issues and solutions

Users may miss out on error messages if they aren't visibly clear or accessible. Ensure messages are styled effectively and can be read by screen readers.
Inconsistent behaviours in custom validation scripts can occur if inputs dynamically change or get added to the form. Best to re-bind event listeners when required.