如何更改或删除 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 库 在这里下载：https://github.com/javanto/civem.js 现场演示：http://jsfiddle.net/hleinone/njSbH/

Answer 8

我现在偶然发现了一个方法： 你可能需要使用这个：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 9

setCustomValidity 可让您更改默认验证消息。这是如何使用它的简单示例。

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 oninvalid 不起作用

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

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

Answer 14

<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')" />