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

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

 <input type="text" required="" pattern="[0-9]{10}" value=""> 
  1. 如何更改HTML 5表单validation错误默认消息?
  2. 如果第一点可以完成,那么有没有办法创build一些属性文件,并在该文件中设置自定义错误消息?

我在Ankur的答案中发现了一个错误,我修正了这个错误:

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

设置无效input数据时出现的错误,然后更正input并发送表单。 哎呀! 你不能这样做。 我已经在Firefox和Chrome上testing过了

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

我在另一篇文章中发现了这个代码。

你可以通过约束validationAPI来改变它们: http : //www.w3.org/TR/html5/constraints.html#dom-cva-setcustomvalidity

如果你想要一个简单的解决scheme,你可以摇出civem.js,自定义inputvalidation错误消息JavaScript的lib下载在这里: https : //github.com/javanto/civem.js现场演示在这里: http : //jsfiddle.net/ hleinone / njSbH /

为了防止浏览器validation消息出现在您的文档中,使用jQuery:

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

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

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

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

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; } 

小提琴演示

setCustomValidity使您可以更改默认的validation消息。这里是如何使用它的简单例子。

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

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

它会完美的循环运行。

这是一个非常好的链接,我发现检查html5validation的各种属性。

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

希望它可以帮助别人。

我偶然发现了一个方法:你可以使用这个: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/> 

正如你所看到的:

修正input字段后,html5 oninvalid不起作用

对你这样做是好的,因为当你修复错误时,警告信息会消失。

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

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