如何更改或删除 HTML5表单验证默认错误消息？

例如，我有一个 textfield。该字段是强制性的，只有数字是必需的，值的长度必须为10。当我尝试提交长度为5的表单时，默认的错误消息出现: Please match the requested format

<input type="text" required="" pattern="[0-9]{10}" value="">
  1. 如何更改 HTML 5表单验证错误默认消息？
  2. 如果第一点可以完成，那么有没有办法创建一些属性文件，并在该文件中设置自定义错误消息？
220062 次浏览
小开

您可以通过约束验证 api: http://www.w3.org/TR/html5/constraints.html#dom-cva-setcustomvalidity更改它们

如果你想要一个简单的解决方案，你可以使用 civem.js，Custom Input ValidationError Messages JavaScript lib 下载: https://github.com/javanto/civem.js 现场演示: http://jsfiddle.net/hleinone/njsbh/

小开 
<input type="text" pattern="[a-zA-Z]+"
oninvalid="setCustomValidity('Plz enter on Alphabets ')" />

我在另一个帖子里找到了这个代码。

小开
最佳答案

这是 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="" />
小开

当使用 pattern = 时，它将显示您在 title 属性中放入的任何内容，因此不需要 JS，只需执行以下操作:

<input type="text" required="" pattern="[0-9]{10}" value="" title="This is an error message" />
小开

SetCustomVality 允许您更改默认验证消息。

var age  =  document.getElementById('age');
age.form.onsubmit = function () {
age.setCustomValidity("This is not a valid age.");
};
小开

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;
}

Fiddle Demo

小开

你可按以下步骤删除此警报:

<input type="text" pattern="[a-zA-Z]+"
oninvalid="setCustomValidity(' ')"
/>

只需将自定义消息设置为一个空格即可

小开

为了防止浏览器验证消息出现在文档中，使用 jQuery:

$('input, select, textarea').on("invalid", function(e) {
e.preventDefault();
});
小开

这是我发现的关于检查 html5验证的各种属性的一个非常好的链接。

Https://dzone.com/articles/custom-validation-messages

希望能帮到别人。

小开

我偶然发现了一个方法: 您可以使用以下命令: 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/>
小开

正如你在这里看到的:

修复输入字段之后，html5 on 无效不起作用

好在你把这样的方式，为当你修复错误消失的警告消息。

<input type="text" pattern="[a-zA-Z]+"
oninvalid="this.setCustomValidity(this.willValidate?'':'your custom message')" />
小开

我在 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("");
}
}

它会完美地循环运行。

小开

这是我在 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')" />

小开

只需要对 < form > tag 使用“ novalid”即可

请按此浏览详情

小开

要设置用于 HTML 5验证的自定义错误消息,

oninvalid="this.setCustomValidity('Your custom message goes here.')"

并在用户输入有效数据使用时删除此消息,

onkeyup="setCustomValidity('')"

希望这对你有用。)


提交答案