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

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

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

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

我在Ankur答案上发现了一个错误，并通过以下更正对其进行了修复：

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

设置无效的输入数据，然后更正输入并发送表格时看到的错误。哎呀！你做不到 我已经在Firefox和Chrome上测试过

当使用pattern =时，它将显示您放在标题attrib中的内容，因此不需要JS就可以了：

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

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

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

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

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

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

您可以通过执行以下操作删除此警报：

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

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

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

如果您想要一个简单的解决方案，则可以在此处下载civem.js，自定义输入验证错误消息JavaScript库，网址为：https : //github.com/javanto/civem.js 在线演示，网址为：http : //jsfiddle.net/克莱因酮/ njSbH /

使用setCustomValidity可以更改默认验证消息。以下是有关如何使用它的简单示例。

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

我现在偶然发现了一种方法：您可以使用此方法：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/>

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

它将完美地循环运行。

这是我找到的有关检查html5验证的各种属性的很好的链接。

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

希望它能帮助某人。

如您所见：

修复输入字段后html5 oninvalid无法正常工作

这样对您有好处，因为修复错误时，警告消息会消失。

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

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

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

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

onkeyup="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>标签使用“ novalidate”

点击这里查看更多详细信息