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

Question

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

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

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

Answer 1

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

Answer 2

当使用 pattern= 时，它将显示您在标题属性中输入的任何内容，因此不需要 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;
}

小提琴演示

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

我现在意外地找到了一种方法：你可以使用这个：数据错误："

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

setCustomValidValid允许您更改默认验证消息。这是如何使用它的简单示例。

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

Answer 10

我在 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 11

这在 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 12

若要设置 HTML 验证使用的自定义错误消息，

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

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

onkeyup="setCustomValidity('')"

Answer 13

正如你在这里看到的：

HTML5 onvalidal在修复输入字段后不起作用

以这种方式对您很好，因为当您修复错误时会消失警告消息。

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