HTML and Javascript empty form validation is not working-CodePudding

This code isn't working. If email and password are empty, display "Please enter your email and password." If just email is empty, display "Please enter your email." If just password is empty, display "Please enter your password." If none are empty, display no error message. That is the functionality behind this code, however.. it isn't working. What's happening? Code:

   <script type='text/javascript'>
    
    var loginEmail = document.getElementById('ema');
    var loginPassword = document.getElementById('pswd');
    var loginBtn = document.getElementById('loginBtn');
    var loginError = document.getElementById('loginError');
    
    loginBtn.addEventListener("click", function(e) {
      e.preventDefault();
      if(loginEmail.value === "" || loginPassword.value === "") {
        loginError.style.visibility = 'visible';
        loginError.innerText = "Please enter your email and password.";
      } else if (loginEmail.value === "" && loginPassword.value.length > 0) {
        loginError.style.visibility = 'visible';
        loginError.innerText = "Please enter your email.";
      } else if (loginPassword.value === "" && loginEmail.value.length > 0) {
        loginError.style.visibility = 'visible';
        loginError.innerText = "Please enter your password.";
      } else {
        loginError.style.visibility = 'hidden';
      }
    });
    
    </script>

CodePudding user response：

you need to use e.preventDefault() because if you click button it will render and for getting text value you have to use loginEmail.value not loginEmail

var loginEmail = document.getElementById('ema');
    var loginPassword = document.getElementById('pswd');
    var loginBtn = document.getElementById('loginBtn');
    var loginError = document.getElementById('loginError');
    
    loginBtn.addEventListener("click", function(e) {
      if(loginEmail.value === "" && loginPassword.value === "") {
        e.preventDefault()
        loginError.style.visibility = 'visible';
        loginError.innerText = "Please enter your email/password.";
      } else {
        loginError.style.visibility = 'hidden';
      }
    });

<form class="modal-content animate" action="" method="post">
        <div class="imgcontainer">
          <span onclick="location.href='index.php'" class="close" title="Close Modal"></span>
          <img src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/user-alt-512.png" alt="Avatar" class="avatar">
        </div>
    
        <div class="container">
          <label for="username"><b></b></label>
          <input class="ema" id="ema" type="text" placeholder="Email Address" name="uname">
          <!-- <small style="margin-top:56px; position: fixed; margin-left: -498px; font-size: 14px; color:red; visibility: hidden" id="mailText"></small> -->
    
          <label for="psw"><b></b></label>
          <input class="pass" id="pswd" type="password" placeholder="Password" name="psw">
    
          <button type="submit" id="loginBtn" class="ltn" style="border-radius:10px; outline:none; font-family:inherit; color:white; font-size:17px"><b>Log In</b></button>
          <label>
            <small style="margin-top: 62px; font-size:20px; margin-left:-330px; color:red; visibility:hidden" id="loginError"></small>
        </div>
    
    <div class="container">
      <hr style="margin-top:-10px">
    </div>
    
        <div class="container">
          <center><button type="button" class="signupbtn" id="sgnbtn" style="border-radius:10px; margin-top:-50px; font-family:inherit; color:white; font-size:15px; margin-left: -210px"><b>Sign Up</b></button></center>
          <center><button type="button" class="forgotPass" id="forgotPass" style="border-radius:10px; margin-top:-47px; position:fixed; font-family:inherit; color:white; font-size:15px; margin-left:20px"><b>Forgot Password?</b></button></center>
        </div>
      </form>
    </div>

CodePudding user response：

loginPassword.value not loginPassword