HTML5验证在自定义验证之前执行
[英]HTML5 validation executes before custom validation
问题描述
我有一张表格，要求用户提供一些输入值。 对于一些初始输入，我正在使用javascript进行自定义验证。 在表单末尾，使用“ html必需属性”验证一个字段。 但是，当用户单击“提交”按钮时，具有必需属性的输入框将首先显示消息，而不是给先前的消息提供机会，即不遵循错误显示的顺序。 我在下面添加了代码和图像，而不是显示该名称为空，而是直接跳转到位置输入框。 这只会使最终用户感到困惑。 为什么会出现此问题以及如何解决？
<html> <head> <script> function validate(){ var name = document.forms['something']['name'].value.replace(/ /g,""); if(name.length<6){ document.getElementById('message').innerHTML="Enter correct name"; return false; } } </script> </head> <body> <form name="something" action="somewhere" method="post" onsubmit="return validate()"> <div id="message"></div> Enter Name : <input type="text" name="name" /> <br/> <br/> Enter Location : <input type="text" name="location" required="required" /> <br/> <br/><br/> <br/> <input type="submit" name="submit" /> </form> </body> </html>
1 个解决方案
解决方案1
0 2017-01-05 06:54:18
由于位置输入中的required属性，这可能只是触发了HTML5表单验证。
因此，一种选择是在名称上也设置required属性。 或禁用带有novalidate属性的HTML5验证。 请参阅此处以获取更多信息： https : //stackoverflow.com/a/3094185/2008111
更新
因此，更简单的方法是在名称上也添加required属性。 以防万一有人在输入任何内容之前提交表格。 原因HTML5验证将首先触发。 解决此问题的另一种方法是在所有位置删除required属性。 像这样 现在，一旦名称输入失去焦点，例如onblur ，就会触发javascript验证。
var nameElement = document.forms['something']['name']; nameElement.onblur = function(){ var messageElement = document.getElementById('message'); var string = nameElement.value.replace(/ /g,""); if(string.length<6){ messageElement.innerHTML="Enter correct name"; } else { messageElement.innerHTML=""; } };
<form name="something" action="somewhere" method="post"> <div id="message"></div> Enter Name : <input type="text" name="name" required="required" /> <br/> <br/> Enter Location : <input type="text" name="location" required="required" /> <br/> <br/><br/> <br/> <input type="submit" name="submit" /> </form>
现在我猜上面的工作正常。 但是想象一下，您可能需要在多个地方使用该功能，除了要观察的元素和错误消息外，它们是相同的。 当然，可能会有更多类似的地方显示消息等。这只是让您了解如何使用相同的功能为更多场景设置：
var nameElement = document.forms['something']['name']; nameElement.onblur = function(){ validate(nameElement, "Enter correct name"); }; function validate(element, errorMessage) { var messageElement = document.getElementById('message'); var string = element.value.replace(/ /g,""); if(string.length < 6){ messageElement.innerHTML= errorMessage; } else { messageElement.innerHTML=""; } }
<form name="something" action="somewhere" method="post"> <div id="message"></div> Enter Name : <input type="text" name="name" required="required" /> <br/> <br/> Enter Location : <input type="text" name="location" required="required" /> <br/> <br/><br/> <br/> <input type="submit" name="submit" /> </form>
密码的HTML5自定义验证
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.