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

Question

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

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

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

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

你可以通过约束验证来改变它们: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

我现在偶然找到了一种方法：你可以使用这个：数据错误：“”

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