Question

例如我有textfield。该字段是必填字段，仅需要数字且值的长度必须为10.当我尝试提交长度为5的值的表单时，将显示默认错误消息：Please match the requested format

<input type="text" required="" pattern="[0-9]{10}" value="">

如何更改HTML 5表单验证错误的默认消息？
如果可以完成第一点，那么有没有办法创建一些属性文件并在该文件中设置自定义错误消息？

Answer 1

我在Ankur答案中发现了一个错误，我已经修正了这个错误：

 <input type="text" pattern="[a-zA-Z]+"
    oninvalid="setCustomValidity('Plz enter on Alphabets ')"
    onchange="try{setCustomValidity('')}catch(e){}" />

设置无效输入数据时出现的错误，然后更正输入并发送表单。哎呀！你不能这样做。我在firefox和chrome上测试了它

Answer 2

当使用pattern =时，它会显示你在标题attrib中放置的内容，所以不需要JS只做：

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

Answer 3

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

我在另一篇文章中找到了这段代码。

Answer 4

<强> 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

Answer 5

使用jQuery阻止浏览器验证消息出现在您的文档中：

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

Answer 6

您可以通过执行以下操作来删除此提醒：

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

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

Answer 7

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

如果你想要一个简单的解决方案，你可以摆脱civem.js，自定义输入验证错误消息JavaScript lib 在这里下载：https://github.com/javanto/civem.js 现场演示：http://jsfiddle.net/hleinone/njSbH/

Answer 8

setCustomValidity允许您更改默认验证消息。这是一个如何使用它的简单例子。

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

Answer 9

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

它将在循环中完美运行。

Answer 10

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

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

希望它有所帮助。

Answer 11

我偶然发现了一条道路：你可以使用这个：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/>

Answer 12

正如你在这里看到的那样：

html5 oninvalid doesn't work after fixed the input field

对你这样做很好，因为当你修复错误时会消除警告信息。

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

Answer 13

这适用于我的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')"

Answer 14

只需使用＆＃34; novalidate＆＃34; for＆lt;形式＆gt;标签

click here for more deteails

Answer 15

要为HTML 5验证设置自定义错误消息，

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

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

onkeyup="setCustomValidity('')"

希望这对您有用。享受;）

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

15 个答案: