关于javascript：Chrome浏览器”请匹配请求的格式”验证消息


Chrome 'please match the requested format' validation message

我正在研究HTML 5验证和本地化，并设法使一些代码可以使我本地化HTML 5验证错误消息(请参见下文)。我的问题是，在Chrome中，当与某个模式匹配时，您仍然会弹出英语(或者我猜您在Chrome中设置了哪种语言)"请与请求的格式匹配"。您如何抑制此弹出窗口，以便我只能使用自己的验证消息？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
        $(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("");
                };
            }
        });
相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
    $(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语句之后。哪个更适合您的目的。

相关讨论

如果您正在运行自己的验证，则可以通过将表单的novalidate属性设置为" novalidate"(如

)来阻止任何内置的HTML5浏览器验证

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

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

相关讨论

使用jQuery：

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

建立@ michael-angstadt答案。您可以通过添加以下jQuery自动将novalidate属性添加到表单中：

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