title: Problems with form validation. Javascript/HTML
body: <p>I'm having trouble with my form validation logic in my year one Javascript project.</p>
  
  <p>Specifically with my errors reporting with the events.</p>
  
  <p>The page randomly refreshes when I'm testing for "no username entered" etc.
  Some errors will display for a moment and disappear.</p>
  
  <p>Any help would be much appreciated, and will contribute to fixing the overall problem.</p>
  
  <pre><code>&lt;body onload="setup()"&gt;
  &lt;div class="container-fluid"&gt;
      &lt;div class="page-header" class = "row"&gt;
          &lt;div class="col-lg-12"&gt; 
              &lt;img id="banner" src = "pictures/homepage/banner.jpg" width = "100%" height = "20%"&gt;&lt;/img&gt;
          &lt;/div&gt;
          &lt;p id="charc"&gt;Charcoal&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="butts"&gt;
          &lt;button onclick="dropdown()" class="button"&gt;Categories&lt;/button&gt; 
          &lt;button class="button"&gt;My Account&lt;/button&gt;
          &lt;button class="button"&gt;Shopping Cart&lt;/button&gt;
          &lt;button id="loggedIn-Out" class="button"&gt;Login/Register&lt;/button&gt;
      &lt;/div&gt;
      &lt;div id="myDropDwn" class= "dropContent"&gt;
          &lt;a href = "#"&gt; womens &lt;/a&gt;
          &lt;a href = "#"&gt; mens &lt;/a&gt;
          &lt;a href = "#"&gt; shoes &lt;/a&gt;
          &lt;a href = "#"&gt; accessories &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="login-page" class="col-lg-6"&gt;
      &lt;div class="form"&gt;
          &lt;form id="logForm" class="login-form"&gt;
              &lt;input id="username" type="text" placeholder="Username"&gt;
              &lt;div id="login-user-error" class="errorReps"&gt;&lt;/div&gt;
  
              &lt;input id="password" type="password" placeholder="Password"&gt;
              &lt;div id="login-pass-error" class="errorReps"&gt;&lt;/div&gt;
  
              &lt;button onclick="loginUser()"&gt;Login&lt;/button&gt;
              &lt;div id="login-error" class="errorReps"&gt;&lt;/div&gt;
              &lt;p class="loginMessage"&gt; Not Registered? &lt;a href="#"&gt;Register&lt;/a&gt;
              &lt;br&gt;
              &lt;br&gt;
              &lt;a href="register.html" id="logoutButton" onclick="logoutUser()"&gt;Logout&lt;/a&gt;
          &lt;/form&gt;
  
          &lt;form id="regForm" class="register-form"&gt;
              &lt;input id="newFName" type="text" placeholder="First Name"&gt;
              &lt;div id="reg-FName-error" class="errorReps"&gt;&lt;/div&gt;
  
              &lt;input id="newLName" type="text" placeholder="Last Name"&gt;
              &lt;div id="reg-LName-error" class="errorReps"&gt;&lt;/div&gt;
  
              &lt;input id="newUName" type="text" placeholder="Username"&gt;
              &lt;div id="reg-UName-error" class="errorReps"&gt;&lt;/div&gt;
  
              &lt;input id="newPass" type="password" placeholder="Password"&gt; 
              &lt;div id="reg-pass-error" class="errorReps"&gt;&lt;/div&gt;
              &lt;div id="passStrength"&gt;&lt;/div&gt;
  
              &lt;input id="newEmail" type="email" placeholder="Email"&gt;
              &lt;div id="reg-email-error" class="errorReps"&gt;&lt;/div&gt;
  
              &lt;input id="newPhone" type="number" placeholder="Tel. Number"&gt;
              &lt;div id="reg-phone-error" class="errorReps"&gt;&lt;/div&gt;
  
              &lt;button onclick="registerUser()"&gt;Create&lt;/button&gt;
              &lt;p class="loginMessage"&gt; Already Registered? &lt;a href="#"&gt;Login&lt;/a&gt;
          &lt;/form&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="https://code.jquery.com/jquery-3.3.1.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      $('.loginMessage a').click(function(){
      $('form').animate({height:"toggle", opacity: "toggle"}, "slow");
      });
  &lt;/script&gt;
  
  &lt;script&gt;
  
  // pre-coded users
  
  var existingUsers = 
  [
      {   
          firstname: "Gerry",
          lastname: "Agnew",
          username: "GerryA",
          password: "password123",
          email: "gerry@gmit.ie",
          phone:"0833333333"
  
      },
      {
          firstname: "Sean",
          lastname: "Duignan",
          username: "SeanD",
          password: "password456",
          email: "sean@gmit.ie",
          phone:"0822222222"
      },
      {
          firstname: "Michael",
          lastname: "Duignan",
          username: "MichaelD",
          password: "password789",
          email: "michael@gmit.ie",
          phone:"0844444444"
      }
  ]
  
  //function setup()
  //{
      // setup functions
  //}
  
  
  function dropdown()
  {
      document.getElementById("myDropDwn").classList.toggle("show");
  }
  username.addEventListener('blur', logUserVerify, true);
  password.addEventListener('blur', logPassVerify, true);
  newFName.addEventListener('blur', fNameVerify, true);
  newLName.addEventListener('blur', lNameVerify, true);
  newUName.addEventListener('blur', regUserVerify, true);
  newPass.addEventListener('blur', regPassVerify, true);
  newEmail.addEventListener('blur', emailVerify, true);
  newPhone.addEventListener('blur', phoneVerify, true);
  
  function loginValidate()
  {
      if(username == "")
      {
          document.getElementById("login-user-error").innerHTML = "Username required";
          //username.focus();
          return false;
      }       
      if(password == "")
      {
          document.getElementById("login-pass-error").innerHTML = "Password required";
          password.focus();
          return false;
      }       
  }
  
  function registerValidate()
  {
      if(registerFName == "")
      {
          document.getElementById("reg-FName-error").innerHTML = "First Name required";
          newFName.focus();
          return false;
      }
      if(registerLName == "")
      {
          document.getElementById("reg-LName-error").innerHTML = "Last Name required";
          newLName.focus();
          return false;
      }
      if(registerUName == "")
      {
          document.getElementById("reg-UName-error").innerHTML = "Username required";
          newUName.focus();
          return false;
      }
      if(registerUName.length &lt; 8)
      {
          document.getElementById("reg-UName-error").innerHTML = "Username must be 8 characters or more";
          newUName.focus();
          return false;
      }
      if(registerPass == "")
      {
          document.getElementById("reg-pass-error").innerHTML = "Password required";
          newPass.focus();
          return false;
      }
      if(registerEmail == "")
      {
          document.getElementById("reg-email-error").innerHTML = "Email required";
          newEmail.focus();
          return false;
      }
      if(registerPhone == "")
      {
          document.getElementById("reg-phone-error").innerHTML = "Phone number required";
          newPhone.focus();
          return false;
      }
  }
  // Event Functions
  
  function logUserVerify()
  {
      if (username != "")
      {
          document.getElementById("login-user-error").innerHTML = "";
          return true;
      }
  }
  function logPassVerify()
  {
      if (password != "")
      {
          document.getElementById("login-pass-error").innerHTML = "";
          return true;
      }
  }
  function fNameVerify()
  {
      if (registerFName != "")
      {
          document.getElementById("login-FName-error").innerHTML = "";
          return true;
      }
  }
  function lNameVerify()
  {
      if (registerLName != "")
      {
          document.getElementById("login-LName-error").innerHTML = "";
          return true;
      }
  }
  function regUserVerify()
  {
      if (registerUName != "")
      {
          document.getElementById("login-UName-error").innerHTML = "";
          return true;
      }
      if (registerUName &gt; 8)
      {
          document.getElementById("login-UName-error").innerHTML = "";
          return true;
      }
  }
  function regPassVerify()
  {
      if (registerPass != "")
      {
          document.getElementById("login-pass-error").innerHTML = "";
          return true;
      }
  }
  function phoneVerify()
  {
      if (registerPhone != "")
      {
          document.getElementById("login-phone-error").innerHTML = "";
          return true;
      }
  }
  function emailVerify()
  {
      if (registerEmail != "")
      {
          document.getElementById("login-email-error").innerHTML = "";
          return true;
      }
  }   
  
  // Login/Register Functions
  
  function loginUser()
  {
      var username = document.getElementById("username").value;
      var password = document.getElementById("password").value;
  
      for (i = 0; i &lt; existingUsers.length; i++)
      {
          if(username == existingUsers[i].username &amp;&amp; password == existingUsers[i].password)
          {
              alert(username + " Is logged in");
              document.getElementById("loggedIn-Out").innerHTML = username;
              document.getElementById("login-user-error").innerHTML = "";
              localStorage.user = username;
              localStorage.pass = password;
              return;
          }
          else if(username != existingUsers[i].username)
          {
              document.getElementById("login-user-error").innerHTML = "Invalid, user does not exist";
              username.focus();
              return false;
          }
  
          else
          {
              loginValidate();
          }   
      }
  }
  
  function logoutUser()
  {
      localStorage.removeItem("user");
      localStorage.removeItem("pass");
      document.getElementById("loggedIn-Out").innerHTML = "Login/Register";
  }
  
  function registerUser()
  {
      var registerFName = document.getElementById("newFName").value;
      var registerLName = document.getElementById("newLName").value;
      var registerUName = document.getElementById("newUName").value;
      var registerPass = document.getElementById("newPass").value;
      var registerEmail = document.getElementById("newEmail").value;
      var registerPhone = document.getElementById("newPhone").value;
  
      localStorage.regFname = registerFName;
      localStorage.regLname = registerLName;
      localStorage.regUname = registerUName;
      localStorage.regPass = registerPass;
      localStorage.regMail = registerEmail;
      localStorage.regPhone = registerPhone;
  
      var newUser =
      {
          firstname: registerFName,
          lastname: registerLName,
          username: registerUName,
          password: registerPass,
          email: registerEmail,
          phone: registerPhone
      }
  
      for(i = 0; i &lt; existingUsers.length; i++)
      {
  
          if(registerUName == existingUsers[i].username)
          {
              document.getElementById("reg-UName-error").innerHTML = "Username already exists";
              newUName.focus();
              return false;
          }
  
          if(registerEmail == existingUsers[i].email)
          {
              document.getElementById("reg-email-error").innerHTML = "Email already exists";
              newEmail.focus();
              return false;
          }
          registerValidate();
      }
      existingUsers.push(newUser);
  }
  // Password Strength functions
  
  function passwordStr()
  {
      var passValue = document.getElementById("newPass").value;
  
      if(passValue.length &gt;= 8 &amp;&amp; passValue.length &lt;= 10)
      {
          document.getElementById("passStrength").innerHTML = "Weak";
      }
      else if(passValue.length &gt; 10 &amp;&amp; passValue.length &lt;= 16)
      {
          document.getElementById("passStrength").innerHTML = "Average";
          document.getElementById("passStrength").style.color = "yellow";
      }
      else if(passValue.length &gt; 16)
      {
          document.getElementById("passStrength").innerHTML = "Strong";
          document.getElementById("passStrength").style.color = "green";
      }
      else
      {
          document.getElementById("passStrength").style.color = "red";
      }
  }
  var passInput = document.getElementById("newPass");
  passInput.addEventListener("input", passwordStr);
  
  &lt;/script&gt;
  </code></pre>
  
  <p></p>