我有一个表单可以验证密码为空/空白或不使用 onblur。我使用提交按钮提交表单。但是提交按钮需要点击两次才能工作。在密码框中填写内容后，第一次单击时它不起作用。下面是代码。
关于 Jquery，我需要纯 Javascript 的解决方案。
我试过 onkeyup，但这不是一个好的解决方案，因为它会给系统和服务器(对于 ajax)带来压力。
<!DOCTYPE html>
<html>
<body>
<script>
var error_user_password = false;
function checkpw(){
var user_password = document.forms["joinform"]["user_password"].value;
if (user_password == null || user_password == "") {
text = "Password : Required";
document.getElementById("errormsg4").innerHTML = text;
error_user_password = false;
} else {
document.getElementById("errormsg4").innerHTML = "";
error_user_password = true;
}
}
function submitall() {
checkpw()
if(error_user_password == false) {
return false;
} else {
return true
}
}
</script>
</body>
<form id="joinform" method="post" name="joinform" action="#hello" onsubmit="return submitall()" >
<h2>Join</h2>
<input type="password" name="user_password" id="user_password" placeholder="Password" onblur="checkpw()" />
<div class ="errormsg" id ="errormsg4"></div><br>
<input type="submit" name="join" id="join" value="Submit" ><br><br>
</form>
</html>
最佳答案
OnBlur Validation Requires Onsubmit Button to Be Clicked Twice in Pure Javascript
发生这种情况是因为 blur 事件是从 onblur 事件处理程序捕获的，而不是冒泡到表单提交按钮。
完整的 javaScript 解决方案基于:
- addEventListener
- activeElement : 在模糊事件中，我会在 10 毫秒后检查提交按钮是否获得焦点。
我的片段:
var error_user_password = false;
function checkpw(ele, e){
var user_password = document.forms["joinform"]["user_password"].value;
if (user_password == null || user_password == "") {
text = "Password : Required";
document.getElementById("errormsg4").innerHTML = text;
error_user_password = false;
} else {
document.getElementById("errormsg4").innerHTML = "";
error_user_password = true;
}
}
function submitall(ele, e) {
checkpw();
if(error_user_password == false) {
e.preventDefault();
} else {
console.log('form submitted');
}
}
window.addEventListener('DOMContentLoaded', function(e) {
document.getElementById('user_password').addEventListener('blur', function(e) {
checkpw(this, e);
setTimeout(function() {
if (document.activeElement.id == 'join') {
document.activeElement.click();
}
}, 10);
}, false);
document.getElementById('joinform').addEventListener('submit', function(e) {
submitall(this, e);
}, false);
});<form id="joinform" method="post" name="joinform" action="#hello">
<h2>Join</h2>
<input type="password" name="user_password" id="user_password" placeholder="Password"/>
<div class ="errormsg" id ="errormsg4"></div><br>
<input type="submit" name="join" id="join" value="Submit" ><br><br>
</form>关于javascript - OnBlur 验证需要在纯 Javascript 中单击两次提交按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39207232/