Html 如何更改或删除 HTML5 表单验证默认错误消息？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10361460/
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
How can I change or remove HTML5 form validation default error messages?
提问by emilan
For example I have a textfield. The field is mandatory, only numbers are required and length of value must be 10. When I try to submit form with value which length is 5, the default error message appears: Please match the requested format
例如我有一个textfield. 该字段是必填字段，仅需要数字且值的长度必须为 10。当我尝试提交长度为 5 的值时，会出现默认错误消息：Please match the requested format
<input type="text" required="" pattern="[0-9]{10}" value="">
- How can I change HTML 5 form validation errors default messages?
- If 1st point can be done, so Is there a way to create some property files and set in that files custom error messages?
- 如何更改 HTML 5 表单验证错误默认消息？
- 如果可以完成第一点，那么有没有办法创建一些属性文件并在该文件中设置自定义错误消息？
回答by Mahoor13
I found a bug on Ankur answer and I've fixed it with this correction:
我在 Ankur 答案中发现了一个错误，并通过以下更正修复了它：
<input type="text" pattern="[a-zA-Z]+"
oninvalid="setCustomValidity('Plz enter on Alphabets ')"
onchange="try{setCustomValidity('')}catch(e){}" />
The bug seen when you set an invalid input data, then correct the input and send the form. oops! you can't do this. I've tested it on firefox and chrome
当您设置无效的输入数据，然后更正输入并发送表单时看到的错误。哎呀！你不能这样做。我已经在 Firefox 和 chrome 上测试过了
回答by HTF
When using pattern= it will display whatever you put in the title attrib, so no JS required just do:
使用 pattern= 时，它将显示您在标题属性中放置的任何内容，因此不需要 JS 只需执行以下操作：
<input type="text" required="" pattern="[0-9]{10}" value="" title="This is an error message" />
回答by Ankur Loriya
<input type="text" pattern="[a-zA-Z]+"
oninvalid="setCustomValidity('Plz enter on Alphabets ')" />
I found this code in another post.
我在另一篇文章中找到了这段代码。
回答by Rikin Patel
HTML:
HTML：
<input type="text" pattern="[0-9]{10}" oninvalid="InvalidMsg(this);" name="email" oninput="InvalidMsg(this);" />
JAVASCRIPT :
爪哇脚本：
function InvalidMsg(textbox) {
if(textbox.validity.patternMismatch){
textbox.setCustomValidity('please enter 10 numeric value.');
}
else {
textbox.setCustomValidity('');
}
return true;
}
回答by Luca Fagioli
To prevent the browser validation message from appearing in your document, with jQuery:
要防止浏览器验证消息出现在您的文档中，请使用 jQuery：
$('input, select, textarea').on("invalid", function(e) {
e.preventDefault();
});
回答by user3894381
you can remove this alert by doing following:
您可以通过执行以下操作来删除此警报：
<input type="text" pattern="[a-zA-Z]+"
oninvalid="setCustomValidity(' ')"
/>
just set the custom message to one blank space
只需将自定义消息设置为一个空格
回答by albert
you can change them via constraint validation api: http://www.w3.org/TR/html5/constraints.html#dom-cva-setcustomvalidity
您可以通过约束验证 api 更改它们：http: //www.w3.org/TR/html5/constraints.html#dom-cva-setcustomvalidity
if you want an easy solution, you can rock out civem.js, Custom Input Validation Error Messages JavaScript lib download here: https://github.com/javanto/civem.jslive demo here: http://jsfiddle.net/hleinone/njSbH/
如果您想要一个简单的解决方案，您可以在此处下载 civem.js，自定义输入验证错误消息 JavaScript 库：https: //github.com/javanto/civem.js现场演示：http: //jsfiddle.net/ hleinone/njSbH/
回答by kta
The setCustomValidity let you change the default validation message.Here is a simple exmaple of how to use it.
setCustomValidity 可让您更改默认验证消息。这是如何使用它的简单示例。
var age = document.getElementById('age');
age.form.onsubmit = function () {
age.setCustomValidity("This is not a valid age.");
};
回答by Mohammad Shojaa
I Found a way Accidentally Now: you can need use this: data-error:""
我现在偶然找到了一种方法：你可以使用这个：数据错误：“”
<input type="username" class="form-control" name="username" value=""
placeholder="the least 4 character"
data-minlength="4" data-minlength-error="the least 4 character"
data-error="This is a custom Errot Text fot patern and fill blank"
max-length="15" pattern="[A-Za-z0-9]{4,}"
title="4~15 character" required/>
回答by Darshan Gorasia
I found a bug on Mahoor13 answer, it's not working in loop so I've fixed it with this correction:
我在 Mahoor13 的答案上发现了一个错误，它不能循环工作，所以我用这个更正来修复它：
HTML:
HTML：
<input type="email" id="eid" name="email_field" oninput="check(this)">
Javascript:
Javascript：
function check(input) {
if(input.validity.typeMismatch){
input.setCustomValidity("Dude '" + input.value + "' is not a valid email. Enter something nice!!");
}
else {
input.setCustomValidity("");
}
}
It will perfectly running in loop.
它将完美地循环运行。
