例如我有一个textfield. 该字段是必填的，只需要数字，值的长度必须是 10。当我尝试提交长度为 5 的表单时，会出现默认错误消息：Please match the requested format
<input type="text" required="" pattern="[0-9]{10}" value="">
- 如何更改 HTML 5 表单验证错误默认消息？
- 如果可以做到第一点，那么有没有办法创建一些属性文件并在该文件中设置自定义错误消息？
问问题
209196 次
15 回答
232
这是 JavaScript 解决方案：
<input type="text"
pattern="[a-zA-Z]+"
oninvalid="setCustomValidity('Please enter Alphabets.')"
onchange="try{setCustomValidity('')}catch(e){}" />
设置无效输入数据时需要“onchange”事件，然后更正输入并再次发送表单。我已经在 Firefox、Chrome 和 Safari 上对其进行了测试。
但对于现代浏览器：
现代浏览器不需要任何 JavaScript 进行验证。这样做：
<input type="text"
pattern="[a-zA-Z]+"
title="Please enter Alphabets."
required="" />
于 2012-09-11T07:02:52.383 回答
106
使用 pattern= 时，它将显示您在标题属性中输入的任何内容，因此不需要 JS 只需执行以下操作：
<input type="text" required="" pattern="[0-9]{10}" value="" title="This is an error message" />
于 2012-10-08T19:23:44.113 回答
38
<input type="text" pattern="[a-zA-Z]+"
oninvalid="setCustomValidity('Plz enter on Alphabets ')" />
我在另一篇文章中找到了这段代码。
于 2012-04-28T11:56:37.673 回答
17
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;
}
于 2014-03-14T02:30:18.867 回答
14
您可以通过执行以下操作删除此警报：
<input type="text" pattern="[a-zA-Z]+"
oninvalid="setCustomValidity(' ')"
/>
只需将自定义消息设置为一个空格
于 2014-07-31T06:32:59.977 回答
14
要防止浏览器验证消息出现在您的文档中，请使用 jQuery：
$('input, select, textarea').on("invalid", function(e) {
e.preventDefault();
});
于 2015-05-04T12:39:43.943 回答
11
您可以通过约束验证 api 更改它们：http: //www.w3.org/TR/html5/constraints.html#dom-cva-setcustomvalidity
如果您想要一个简单的解决方案，您可以使用 civem.js，自定义输入验证错误消息 JavaScript 库在这里下载：https ://github.com/javanto/civem.js 现场演示：http: //jsfiddle.net/ hleinone/njSbH/
于 2012-04-28T08:40:42.513 回答
5
setCustomValidity 让您可以更改默认验证消息。这是一个简单的使用示例。
var age = document.getElementById('age');
age.form.onsubmit = function () {
age.setCustomValidity("This is not a valid age.");
};
于 2014-01-07T17:05:39.420 回答
5
我现在意外找到了一种方法：您可以使用这个：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/>
于 2016-09-12T02:49:32.903 回答
4
我在 Mahoor13 答案上发现了一个错误，它没有循环工作，所以我用这个更正修复了它：
HTML：
<input type="email" id="eid" name="email_field" oninput="check(this)">
Javascript：
function check(input) {
if(input.validity.typeMismatch){
input.setCustomValidity("Dude '" + input.value + "' is not a valid email. Enter something nice!!");
}
else {
input.setCustomValidity("");
}
}
它将完美地循环运行。
于 2017-02-24T03:23:00.057 回答
4
要为 HTML 5 验证设置自定义错误消息，
oninvalid="this.setCustomValidity('Your custom message goes here.')"
并在用户输入有效数据使用时删除此消息，
onkeyup="setCustomValidity('')"
希望这对你有用。享受 ;）
于 2018-08-28T11:17:01.647 回答
3
于 2015-11-27T13:31:16.047 回答
2
正如你在这里看到的：
这样对你有好处，因为当你修复错误时会消失警告消息。
<input type="text" pattern="[a-zA-Z]+"
oninvalid="this.setCustomValidity(this.willValidate?'':'your custom message')" />
于 2016-09-21T12:58:07.573 回答
2
这在 Chrome 中对我有用
<input type="text" name="product_title" class="form-control"
required placeholder="Product Name" value="" pattern="([A-z0-9À-ž\s]){2,}"
oninvalid="setCustomValidity('Please enter on Producut Name at least 2 characters long')" />于 2017-11-03T03:40:47.020 回答
-1
简单地说，你可以对 <form> 标签使用“novalidate”
于 2018-02-20T09:28:29.257 回答