How can I change or remove HTML form validation default error messages?

html

form-validation

error-messages

browser-compatibility

byNikita Barsukov·Aug 13, 2024

To customize HTML form validation messages, use the setCustomValidity function tied with an event listener for an email input:

let emailInput = document.getElementById('myEmail');

// As stubborn as a mule? Not your error message!
emailInput.addEventListener('invalid', () => {
    emailInput.setCustomValidity('Your so-called "Custom" email error message');
});

// Whoosh! The error message is gone, like your ex.
emailInput.addEventListener('input', () => {
emailInput.setCustomValidity('');
});

This code attaches invalid and input event listeners to the input field. It sets a custom error message when the field is invalid and clears it as soon as the user starts to correct the input.

Working with HTML5 validation attributes

Leveraging the power of HTML5 attributes like pattern and required, you can enforce specific input formats and mandatory fields.

<input type="text" id="phone" pattern="[0-9]{10}" title="Only numbers, please! We aren't calling Hogwarts." required>

This forces the input field to only accept a 10-digit phone number, and if not, it politely asks the user with a handy tooltip, thanks to the title attribute.

Handling multiple error messages

Let's face it, we humans err. So why not cater to all possible errors?

function errorMessageGalore(inputElement) {
    if(inputElement.validity.patternMismatch) {
        inputElement.setCustomValidity("It's a match! Or rather, it needs to be.");
    } else if(inputElement.validity.valueMissing) {
        inputElement.setCustomValidity("Missing value? This ain't hide-n-seek.");
    } else {
        inputElement.setCustomValidity("");
    }
}

Separate JavaScript functions managing error messages for specific fields can be a real saver!

Real-time feedback with event listeners

Remember those pesky error messages that would stick longer than chewing gum under your shoe? Well, we can fix that. Using oninput and onchange listeners to clear custom error messages in real-time can enhance your user experience.

emailInput.oninput = () => {
    // Disappearing act right here!
    emailInput.setCustomValidity('');
};

Ensuring cross-browser compatibility

We all know the notorious story of "But it works on my machine!" To avoid falling into that pitfall, always test your solution across different browsers. Browser compatibility is not a mythical unicorn. It exists.

Managing error messages efficiently

For ardent followers of DRY principle and fans of internationalization, consider organizing your custom error messages in separate files.

jQuery for advanced form validation

If you swing the jQuery way, it provides methods to conveniently set custom validation messages for different validations:

$('form').validate({
    rules: {
        myEmail: {
            required: true,
            email: true
        }
    },
    messages: {
        myEmail: {
            required: "We need your email. A telepathic link would be easier, but...",
            email: "Your email must look like this: [email protected]"
        }
    }
});