javascript Chrome“请匹配请求的格式”验证消息
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13056697/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Chrome 'please match the requested format' validation message
提问by user517406
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?
我正在玩 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("");
};
}
});
回答by Swivel
The default browser action is to display a popup message. You should use e.preventDefault();to prevent it from popping up.
默认浏览器操作是显示弹出消息。您应该使用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("");
};
}
});
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 ifstatement. Which ever suits your purpose better.
理论上你真的可以把它放在e.preventDefault()后面，if (!e.target.validity.valid) {但我注意到你default:的 Switch 中没有，所以我假设你不想要它。在任何一种情况下，您都可以e.preventDefault()在每个人的内部使用case:它，也可以将它放在if语句之后。哪个更适合您的目的。
回答by Michael Angstadt
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
如果您正在运行自己的验证，则可以通过将表单的 novalidate 属性设置为“novalidate”来阻止任何内置的 HTML5 浏览器验证，例如
<form name='testForm' method='POST' action='#' novalidate="novalidate">
This will tell the browser to prevent applying HTML5 auto-validation.
这将告诉浏览器阻止应用 HTML5 自动验证。
回答by Luca Fagioli
With jQuery:
使用 jQuery：
$('input').on("invalid", function(e) {
e.preventDefault();
});
回答by Dex
Building off @michael-angstadt answer. You can automatically add the novalidateattribute to your forms by adding this jQuery:
建立@michael-angstadt 答案。您可以novalidate通过添加以下 jQuery自动将属性添加到表单中：
$("form").attr('novalidate', 'novalidate');
