Chrome '请匹配请求的格式'验证消息 [英] Chrome 'please match the requested format' validation message
问题描述
我正在尝试 HTML 5 验证和本地化，并设法使一些代码工作，使我能够本地化 HTML 5 验证错误消息(见下文).我的问题是，在 Chrome 中与模式匹配时，您仍然会弹出英文(或者我猜您使用 Chrome 设置的任何语言)请匹配请求的格式".您如何抑制此弹出窗口，以便我可以使用自己的验证消息?
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("");
};
}
});
推荐答案
默认浏览器操作是显示弹出消息.您应该使用 e.preventDefault(); 来防止它弹出.
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("");
};
}
});
理论上你真的可以把 e.preventDefault() 放在 if (!e.target.validity.valid) { 之后，但我注意到你没有default: 在你的 Switch 中，所以我假设你不想要它.在任何一种情况下，您都可以在每个单独的 case: 中使用 e.preventDefault() ，或者您可以将它放在 if 之后> 声明.哪个更适合您的目的.
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.
这篇关于Chrome &#39;请匹配请求的格式&#39;验证消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
