在纯Javascript中，OnBlur验证需要点击两次提交按钮才能生效。

Question

在纯Javascript中，OnBlur验证需要点击两次提交按钮才能生效。

3

我有一个表单，它使用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>

- DragonFire

1

你可以在submitall()中调用checkpw()吗？这样在决定提交之前（以及失焦时）就会一直检查。 - Bob Brinks

为什么要调用另一个 validatepassword() 函数？在 onblur 和表单 submit 中都调用同一个函数，并返回验证结果 true 或 false。此外，最好在输入框上使用 onchange 而不是 onblur（因为更改发生在模糊之前）。 - skobaljic

@BobBrinks 抱歉，代码中出现了错误，在submitall()函数中，validatepassword()应该是checkpw()，因此我在submitall()中调用checkpw()但它没有起作用。我已经修复了上面的代码。 - DragonFire

@FissureKing 是的，我在这个表单上有两个ajax调用，我打算在其他可能有多个ajax和100万行mysql数据库的表单上使用此验证。 - DragonFire

1

@DragonFire，无论您的数据库中有多少条记录，您的工作流程似乎有点过时。您应该在用户输入时提供验证，而不是在他们离开后进行验证。使用oninput并编写某种节流函数，以确保您不会过载后端。 - Fissure King

显示剩余3条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gaetanoM · Accepted Answer

在纯JavaScript中，OnBlur验证需要点击两次Onsubmit按钮

这是因为模糊事件被从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>