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

I have a form which validates password null/blank or not using onblur. And I use a submit button to submit the form. However the submit button needs to be clicked twice before to work. It does not work on the first click after something has been filled in the password box. Below is the code.

With respect to Jquery, I require solution in pure Javascript.

I have tried onkeyup, but that is not a good solution as it will put strain on system, and server (for 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>

Solution

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

This happens because the blur event is captured from the onblur event handler and not bubbled to the form submit button.

A full javaScript solution is based on:

addEventListener
activeElement: inside the blur event I check after 10 milliseconds if the submit button get the focus.

My snippet:

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>