Comprehensive Implementation of Custom HTML5 Form Validation Messages

HTML5 Form Validation Fundamentals

HTML5 introduced built-in form validation capabilities through attributes like required and type. By default, browsers display predefined error messages, but developers often need to customize these messages to provide better user experience.

Core Method for Custom Validation Messages

The key to customizing validation messages is using the setCustomValidity() method. This method accepts a string parameter to set custom error messages. When set to an empty string, it indicates validation success.

Configurable Validation Helper Implementation

Below is a fully functional validation helper implementation supporting various validation scenarios:

/**
 * @author ComFreek <https://stackoverflow.com/users/603003/comfreek>
 * @link https://stackoverflow.com/a/16069817/603003
 * @license MIT 2013-2015 ComFreek
 * @license[dual licensed] CC BY-SA 3.0 2013-2015 ComFreek
 * You MUST retain this license header!
 */
(function (exports) {
    function valOrFunction(val, ctx, args) {
        if (typeof val == "function") {
            return val.apply(ctx, args);
        } else {
            return val;
        }
    }

    function InvalidInputHelper(input, options) {
        input.setCustomValidity(valOrFunction(options.defaultText, window, [input]));

        function changeOrInput() {
            if (input.value == "") {
                input.setCustomValidity(valOrFunction(options.emptyText, window, [input]));
            } else {
                input.setCustomValidity("");
            }
        }

        function invalid() {
            if (input.value == "") {
                input.setCustomValidity(valOrFunction(options.emptyText, window, [input]));
            } else {
               input.setCustomValidity(valOrFunction(options.invalidText, window, [input]));
            }
        }

        input.addEventListener("change", changeOrInput);
        input.addEventListener("input", changeOrInput);
        input.addEventListener("invalid", invalid);
    }
    exports.InvalidInputHelper = InvalidInputHelper;
})(window);

Usage Details

The helper function accepts two parameters: the input element and configuration options. Configuration options include:

• defaultText: Default message displayed initially
• emptyText: Message shown when input is empty
• invalidText: Message shown when input is invalid

Each option can be either a string or a function. If it's a function, it can receive the input element as a parameter and return the string to display.

Practical Application Example

Here's how to apply custom validation to an email input field:

<input id="email" type="email" required="required" />

InvalidInputHelper(document.getElementById("email"), {
  defaultText: "Please enter an email address!",

  emptyText: "Please enter an email address!",

  invalidText: function (input) {
    return 'The email address "' + input.value + '" is invalid!';
  }
});

Event Handling Mechanism

The helper function listens to three key events:

• change: Triggered when input value changes and loses focus
• input: Triggered immediately when input value changes
• invalid: Triggered when form is submitted and input is invalid

This multi-event listening ensures correct validation message display across various user interaction scenarios.

Compatibility Considerations

This solution has been tested and works in multiple major browsers:

• Chrome Canary 47.0.2
• IE 11
• Microsoft Edge
• Firefox 40.0.3
• Opera 31.0

Alternative Method Comparison

Besides the above method, you can also use the oninvalid attribute to directly set validation messages:

<input type="email" pattern="[^@]*@[^@]" required oninvalid="this.setCustomValidity('Put here custom message')"/>

While this approach is simple, it lacks flexibility and maintainability, especially when dynamic messages or complex validation logic are needed.

Best Practice Recommendations

In practical development, it's recommended to:

• Use function-based invalidText for dynamic error messages
• Clear custom validation messages when users start typing
• Consider internationalization needs for multi-language error messages
• Perform thorough cross-browser testing