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

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的表单时，出现默认的错误消息:请匹配所请求的格式。

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

1. How can I change HTML 5 form validation errors default messages?
2. 如何更改HTML 5表单验证错误的默认消息?
3. If 1st point can be done, so Is there a way to create some property files and set in that files custom error messages?
4. 如果第一个点可以完成，那么是否有方法创建一些属性文件并在该文件中设置自定义错误消息?

14 个解决方案

#1

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

当您设置无效的输入数据时，会看到错误，然后更正输入并发送表单。哦!你不能这么做。我在火狐和chrome上测试过。

#2

When using pattern= it will display whatever you put in the title attrib, so no JS required just do:

当使用pattern=它将显示您在标题attrib中放入的内容，所以不需要JS:

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

#3

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

I found this code in another post.

我在另一个帖子里发现了这段代码。

#4

To prevent the browser validation message from appearing in your document, with jQuery:

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

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

#5

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.js live demo here: http://jsfiddle.net/hleinone/njSbH/

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

#6

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

将自定义消息设置为一个空白空间。

#7

HTML:

HTML:

<input type="text" pattern="[0-9]{10}" oninvalid="InvalidMsg(this);" name="email" oninput="InvalidMsg(this);"  />

JAVASCRIPT :

JAVASCRIPT:

function InvalidMsg(textbox) {

     if(textbox.validity.patternMismatch){
        textbox.setCustomValidity('please enter 10 numeric value.');
    }    
    else {
        textbox.setCustomValidity('');
    }
    return true;
}

Fiddle Demo

小提琴演示

#8

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.");
 };

#9

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.

它将完美地运行在循环中。

#10

This is a very good link I found about checking various attributes of html5 validations.

这是一个很好的链接，我发现了检查html5有效性的各种属性。

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

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

Hope it helps someone.

希望它能帮助一些人。

#11

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

#12

As you can see here:

你们可以看到

html5 oninvalid doesn't work after fixed the input field

在固定输入字段后，html5 oninvalid无效。

Is good to you put in that way, for when you fix the error disapear the warning message.

这样做对您很好，因为当您修复错误时，就会取消警告消息。

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

#13

This is work for me in Chrome

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

#14

simply you can use "novalidate" for < form > tag

简单地说，您可以使用“novalidate”作为< form >标记。

click here for more deteails

点击这里查看更多的邮件。