HTML and Javascript empty form validation is not working

Question

I have this code, HTML and JavaScript. However, it isn't working. What I'm trying to do is if the email and password fields are empty, it should display "Please enter your email/password.", which I specified to happen in the JavaScript using that innerText for the span tag. However, even if I leave the fields empty, and click on the submit button (which I added a click event listener to), it isn't displaying that error message. Nothing is showing up in the console either. What to do? Here's the code:

 var loginEmail = document.getElementById('ema'); var loginPassword = document.getElementById('pswd'); var loginBtn = document.getElementById('loginBtn'); var loginError = document.getElementById('loginError'); loginBtn.addEventListener("click", function() { if(loginEmail === "" && loginPassword === "") { 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="position:fixed; 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>

Please help me. Thank you!

Answer 1

loginPassword.value 不是 loginPassword

Answer 2

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>