Chrome“请匹配请求的格式”验证消息答案

【问题标题】：Chrome 'please match the requested format' validation messageChrome“请匹配请求的格式”验证消息
【发布时间】：2012-10-24 19:54:45
【问题描述】：

我正在玩 HTML 5 验证和本地化，并设法让一些代码工作，使我能够本地化 HTML 5 验证错误消息（见下文）。我的问题是，在 Chrome 中与模式匹配时，您仍然会弹出英语（或者我猜您设置了 Chrome 的任何语言）“请匹配请求的格式”。您如何抑制此弹出窗口，以便我可以使用自己的验证消息？

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

【问题讨论】：

HTML5 form required attribute. Set custom validation message? 的可能重复项
不是那个问题的重复项
希望我能回答你的问题:)
我不确定，但你可能必须使用 e.preventDefault() 但你不能先用 e.type 检查它是否来自弹出窗口？
我如何检查源是弹出窗口？

标签： javascript html asp.net-mvc-4

【解决方案1】：

默认浏览器操作是显示弹出消息。您应该使用e.preventDefault(); 来防止它弹出。

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

理论上你真的可以把e.preventDefault() 放在if (!e.target.validity.valid) { 之后，但我注意到你的Switch 中没有default:，所以我假设你不想要它。在任何一种情况下，您都可以在每个单独的case: 中使用e.preventDefault()，或者您可以将它放在if 语句之后。哪个更适合您的目的。

【讨论】：

感谢您的建议，但这可以防止所有弹出窗口，因此稍后在我的 javascript 中调用 e.target.setCustomValidity 时，它会被忽略。
也许这会有所帮助：stackoverflow.com/questions/1164132/…
这个的jQuery版本是什么？
使用 e.preventDefault();在每个单独的输入的 onInvalid 事件上不应阻止所有弹出窗口的发生。解决方案是使用 e.preventDefault();，但是，放置是关键......但是放置完全取决于您要隐藏弹出消息的位置和原因。

【解决方案2】：

如果您正在运行自己的验证，您可以通过将表单的 novalidate 属性设置为“novalidate”来阻止任何内置的 HTML5 浏览器验证

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

这将告诉浏览器阻止应用 HTML5 自动验证。

【讨论】：

这对我有用。我很沮丧，找不到导致问题的脚本或代码。但是这段代码对我有用。

【解决方案3】：

使用 jQuery：

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

【讨论】：

【解决方案4】：

以@michael-angstadt 回答为基础。您可以通过添加此 jQuery 自动将 novalidate 属性添加到您的表单中：

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

【讨论】：