Chrome 'please match the requested format' validation message

Question

I am playing around with HTML 5 validation and localization and have managed to get some code working that allows me to localize the HTML 5 validation error messages (see below). My problem is, in Chrome when matching against a pattern you still get a pop up in English (or I guess whatever language you have Chrome set up in) 'please match the requested format'. How do you supress this pop up so that I can just use my own validation messages?

        $(document).ready(function () {

            var elementsInput = document.getElementsByTagName("input");
            var elementsTextArea = document.getElementsByTagName("textarea");

            for (var i = 0; i < elementsInput.length; i++) {
                elementsInput[i].oninvalid = function (e) {
                    e.target.setCustomValidity("");
                    if (!e.target.validity.valid) {

                        switch (e.target.name) {

                            case "Name":
                                if ("@Thread.CurrentThread.CurrentUICulture.Name.ToLower()" == "fi-fi") {
                                    e.target.setCustomValidity("Anna nimesi");
                                } else {
                                    e.target.setCustomValidity("Please enter a Name");
                                }
                                break;

                            case "EmailAddress":
                                if (e.target.validity.valueMissing) {
                                    if ("@Thread.CurrentThread.CurrentUICulture.Name.ToLower()" == "fi-fi") {
                                        e.target.setCustomValidity("Anna sähköpostiosoitteesi");
                                    } else {
                                        e.target.setCustomValidity("Please enter an Email Address");
                                    }
                                }
                                else if (e.target.validity.patternMismatch) {
                                    if ("@Thread.CurrentThread.CurrentUICulture.Name.ToLower()" == "fi-fi") {
                                        e.target.setCustomValidity("Virheellinen sähköpostiosoite");
                                    } else {
                                        e.target.setCustomValidity("Invalid Email Address");
                                    }
                                }
                                break;

                            case "PhoneNumber":
                                if (e.target.validity.valueMissing) {
                                    if ("@Thread.CurrentThread.CurrentUICulture.Name.ToLower()" == "fi-fi") {
                                        e.target.setCustomValidity("Anna puhelinnumerosi");
                                    } else {
                                        e.target.setCustomValidity("Please enter a Phone Number");
                                    }
                                }
                                else if (e.target.validity.patternMismatch) {
                                    if ("@Thread.CurrentThread.CurrentUICulture.Name.ToLower()" == "fi-fi") {
                                        e.target.setCustomValidity("Virheellinen puhelinnumero");
                                    } else {
                                        e.target.setCustomValidity("Invalid Phone Number");
                                    }
                                }
                                break;
                            }
                        }
                };
                    elementsInput[i].oninput = function (e) {
                        e.target.setCustomValidity("");
                    };
                }

            for (var j = 0; j < elementsTextArea.length; j++) {
                elementsTextArea[j].oninvalid = function (e) {
                    e.target.setCustomValidity("");
                    if (!e.target.validity.valid) {
                        switch (e.target.name) {
                            case "Details":
                                if ("@Thread.CurrentThread.CurrentUICulture.Name.ToLower()" == "fi-fi") {
                                    e.target.setCustomValidity("Täytäthän yksityiskohdat");
                                } else {
                                    e.target.setCustomValidity("Please enter Details");
                                }
                                break;
                        }
                    }
                };
                elementsTextArea[j].oninput = function (e) {
                    e.target.setCustomValidity("");
                };
            }
        });

Answer 1

The default browser action is to display a popup message. You should use e.preventDefault(); to prevent it from popping up.

    $(document).ready(function () {

        var elementsInput = document.getElementsByTagName("input");
        var elementsTextArea = document.getElementsByTagName("textarea");

        for (var i = 0; i < elementsInput.length; i++) {
            elementsInput[i].oninvalid = function (e) {
                e.target.setCustomValidity("");
                if (!e.target.validity.valid) {

                    switch (e.target.name) {

                        case "Name":
                            e.preventDefault();
                            if ("@Thread.CurrentThread.CurrentUICulture.Name.ToLower()" == "fi-fi") {
                                e.target.setCustomValidity("Anna nimesi");
                            } else {
                                e.target.setCustomValidity("Please enter a Name");
                            }
                            break;

                        case "EmailAddress":
                            e.preventDefault();
                            if (e.target.validity.valueMissing) {
                                if ("@Thread.CurrentThread.CurrentUICulture.Name.ToLower()" == "fi-fi") {
                                    e.target.setCustomValidity("Anna sähköpostiosoitteesi");
                                } else {
                                    e.target.setCustomValidity("Please enter an Email Address");
                                }
                            }
                            else if (e.target.validity.patternMismatch) {
                                if ("@Thread.CurrentThread.CurrentUICulture.Name.ToLower()" == "fi-fi") {
                                    e.target.setCustomValidity("Virheellinen sähköpostiosoite");
                                } else {
                                    e.target.setCustomValidity("Invalid Email Address");
                                }
                            }
                            break;

                        case "PhoneNumber":
                            e.preventDefault();
                            if (e.target.validity.valueMissing) {
                                if ("@Thread.CurrentThread.CurrentUICulture.Name.ToLower()" == "fi-fi") {
                                    e.target.setCustomValidity("Anna puhelinnumerosi");
                                } else {
                                    e.target.setCustomValidity("Please enter a Phone Number");
                                }
                            }
                            else if (e.target.validity.patternMismatch) {
                                if ("@Thread.CurrentThread.CurrentUICulture.Name.ToLower()" == "fi-fi") {
                                    e.target.setCustomValidity("Virheellinen puhelinnumero");
                                } else {
                                    e.target.setCustomValidity("Invalid Phone Number");
                                }
                            }
                            break;
                        }
                    }
            };

            elementsInput[i].oninput = function (e) {
                e.target.setCustomValidity("");
            };
        }

        for (var j = 0; j < elementsTextArea.length; j++) {
            elementsTextArea[j].oninvalid = function (e) {
                e.target.setCustomValidity("");
                if (!e.target.validity.valid) {
                    switch (e.target.name) {
                        case "Details":
                            e.preventDefault();
                            if ("@Thread.CurrentThread.CurrentUICulture.Name.ToLower()" == "fi-fi") {
                                e.target.setCustomValidity("Täytäthän yksityiskohdat");
                            } else {
                                e.target.setCustomValidity("Please enter Details");
                            }
                            break;
                    }
                }
            };

            elementsTextArea[j].oninput = function (e) {
                e.target.setCustomValidity("");
            };
        }
    });

Theoretically you can really put the e.preventDefault() right after if (!e.target.validity.valid) { but I noticed you didn't have a default: in your Switch, so I assumed you didn't want it there. In either case, you can use e.preventDefault() inside each individual case: where you want it, or you can put it after the if statement. Which ever suits your purpose better.

Answer 2

If you're running your own validation you can prevent any built-in HTML5 browser validation by setting the novalidate attribute of the form to "novalidate" like

<form name='testForm' method='POST' action='#' novalidate="novalidate">

This will tell the browser to prevent applying HTML5 auto-validation.