OnBlur 验证要求在纯 Javascript 中单击提交按钮两次

Question

我有一个验证密码 null/blank 或不使用 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>

Answer 1

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>

OnBlur 验证要求在纯 Javascript 中单击提交按钮两次

OnBlur Validation Requires Onsubmit Button to Be Clicked Twice in Pure Javascript

javascript

onblur

onsubmit