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("");
                };
            }
        });

possible duplicate of [HTML5 form required attribute. Set custom validation message?](http://stackoverflow.com/questions/5272433/html5-form-required-attribute-set-custom-validation-message) — jbabey, Oct 24 '12 at 19:59
I'm not sure but you probally have to use e.preventDefault() but can't you check first with e.type if it comes from the popup? — Captain Obvious, Nov 08 '12 at 19:40
see it : http://stackoverflow.com/questions/10753881/changing-the-language-of-error-message-in-required-field-in-html5-contact-form — , Oct 20 '13 at 21:31

score 6 · Answer 1 · answered Oct 30 '12 at 19:31

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.

Thanks for the advice, but this prevents all pop ups though, so where I call e.target.setCustomValidity later on in my javascript it gets ignored. — user517406, Oct 31 '12 at 20:47
maybe this will help: http://stackoverflow.com/questions/1164132/how-to-reenable-event-preventdefault — Jamie Taylor, Nov 06 '12 at 14:31
Using e.preventDefault(); on each individual input's onInvalid event shouldn't stop all popups from occurring. The solution is to use e.preventDefault();, however, placement is key... but placement all depends on where and why you want to hide the popup message. — Swivel, Aug 01 '13 at 17:35

score 4 · Answer 2 · answered Aug 07 '14 at 15:35

4

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.

answered Aug 07 '14 at 15:35

Michael Angstadt

880
10
18

1

this works for me. I was so frustrated and could not find the script or code which was causing the issue. But this piece of code worked for me. – arpan shah Apr 24 '15 at 19:33

score 1 · Answer 3 · answered May 04 '15 at 12:34

1

With jQuery:

$('input').on("invalid", function(e) {
    e.preventDefault();
});

answered May 04 '15 at 12:34

Luca Fagioli

12,722
5
59
57

Dex · Answer 4 · 2017-05-25T21:57:15.633

0

Building off @michael-angstadt answer. You can automatically add the novalidate attribute to your forms by adding this jQuery:

$("form").attr('novalidate', 'novalidate');

edited May 25 '17 at 21:57

answered May 25 '17 at 21:50

Dex

12,527
15
69
90

Chrome 'please match the requested format' validation message

4 Answers4

Linked