Chrome 'please match the requested format' validation message

asp.net-mvc-4, html, javascript

Solution

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.

Problem

Original source

Related problems

• changing the language of error message in required field in html5 contact form
• How to reenable event.preventDefault?
• How to set custom validation messages for HTML forms?