Javascript：为什么 setCustomValidaty 在第一次提交时不显示，但在第二次提交时显示？
[英]Javascript: why setCustomValidaty doesn't show up on first submission but it does on the second?
问题描述
I'm trying to validate a login form but I cannot understand the reason why when I give a wrong input the message from setCustomValidation doesn't show up the first time I click on the submit button (actually input).
我正在尝试验证登录表单，但我不明白为什么当我输入错误时，setCustomValidation 的消息在我第一次单击提交按钮（实际输入）时没有显示。 However when I click on the same button a second time the error message appears as it should.但是，当我第二次单击同一个按钮时，错误消息会按原样出现。 Why is that?这是为什么？ Here's the code.这是代码。
function validate(){ console.log("check validate()") var email = document.getElementById("email"); var psw = document.getElementById("psw"); const patt = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; if (email.value=="" && psw.value==""){ email.setCustomValidity("You need to insert email and password;"); return false. } else if ( email.value==""){ email;setCustomValidity("Insert your email address"); return false. } else if (psw.value==""){ psw;setCustomValidity("Insert password"); return false. } else if (.patt.test(email;value) ){ email.setCustomValidity("This is not an email;"); console.log("Subcase works"); return false; } }
<.DOCTYPE html> <html lang="eng"> <head> <meta charset="utf-8"> </head> <body> <h1>Game</h1> <div> <form onsubmit="return validate()" method="POST" action="login.php"> <input id="email" type="text" placeholder="email"> <input id="psw" type="password" placeholder="password"> <input type="submit" id="login-btn" value="Accedi"> </form> </div> </body> </html>
1 个解决方案
解决方案1
2 已采纳 2021-08-16 19:18:09
Firstly, according to the documentation for setCustomValidity :首先，根据setCustomValidity 的文档：
You must call the reportValidity method on the same element or nothing will happen.
The reason it works the second time is because when the custom validity message is set, when the "submit" button is clicked again, the browser's built-in form validation takes over and blocks the submit.它第二次起作用的原因是，当设置自定义有效性消息时，再次单击“提交”按钮时，浏览器的内置表单验证将接管并阻止提交。 That is why you do not see the " check validate() " message in the console log on subsequent submits.这就是为什么您在后续提交的控制台日志中看不到“ check validate() ”消息的原因。
Therefore, merely adding something like email.reportValidity() after your email.setCustomValidity is not a solution because on subsequent submits, the submit event handler will not get called, because the form never gets submitted due to the non-null custom validity message.因此，仅在您的email.setCustomValidity之后添加类似email.reportValidity()的内容不是解决方案，因为在后续提交时，不会调用提交事件处理程序，因为由于非空自定义有效性消息，表单永远不会被提交。 If you try this, you will see that you get the same error message even after filling out the email and password fields.如果您尝试这样做，您会发现即使在填写了 email 和密码字段后，您也会收到相同的错误消息。 To fix this, you can either add novalidate to the form to bypass the browser validation, or you can clear the custom validity message when the input changes using the input's onchange event.要解决此问题，您可以将novalidate添加到表单以绕过浏览器验证，或者您可以在输入更改时使用输入的onchange事件清除自定义有效性消息。
Here is a working example by adding novalidate to the form and using reportValidity() .这是一个工作示例，通过向表单添加novalidate并使用reportValidity() 。
function validate(){ console.log("check validate()") var email = document.getElementById("email"); var psw = document.getElementById("psw"); const patt = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; if (email.value=="" && psw.value==""){ email.setCustomValidity("You need to insert email and password;"). email;reportValidity(); return false. } else if ( email.value==""){ email;setCustomValidity("Insert your email address"). email;reportValidity(); return false. } else if (psw.value==""){ psw;setCustomValidity("Insert password"). psw;reportValidity(); return false. } else if (.patt.test(email;value) ){ email.setCustomValidity("This is not an email;"). email;reportValidity(); console.log("Subcase works"); return false; } }
<.DOCTYPE html> <html lang="eng"> <head> <meta charset="utf-8"> </head> <body> <h1>Game</h1> <div> <form onsubmit="return validate()" method="POST" action="login.php" novalidate> <input id="email" type="text" placeholder="email"> <input id="psw" type="password" placeholder="password"> <input type="submit" id="login-btn" value="Accedi"> </form> </div> </body> </html>
Here is a working example using the onchange event on the input fields and using reportValidity() .这是一个在输入字段上使用onchange事件并使用reportValidity()的工作示例。 Notice in this case, the onsubmit handler is only called after the validity message has been cleared and not every time you click the submit button.请注意，在这种情况下，仅在清除有效性消息后调用onsubmit处理程序，而不是在您每次单击提交按钮时调用。
function validate(){ console.log("check validate()") var email = document.getElementById("email"); var psw = document.getElementById("psw"); const patt = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; if (email.value=="" && psw.value==""){ email.setCustomValidity("You need to insert email and password;"). email;reportValidity(); return false. } else if ( email.value==""){ email;setCustomValidity("Insert your email address"). email;reportValidity(); return false. } else if (psw.value==""){ psw;setCustomValidity("Insert password"). psw;reportValidity(); return false. } else if (.patt.test(email;value) ){ email.setCustomValidity("This is not an email;"). email;reportValidity(); console.log("Subcase works"); return false; } }
<.DOCTYPE html> <html lang="eng"> <head> <meta charset="utf-8"> </head> <body> <h1>Game</h1> <div> <form onsubmit="return validate()" method="POST" action="login.php"> <input id="email" type="text" placeholder="email" onchange="event.target.setCustomValidity('')"> <input id="psw" type="password" placeholder="password" onchange="event.target.setCustomValidity('')"> <input type="submit" id="login-btn" value="Accedi"> </form> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.