HTML 和 Javascript 空表單驗證不起作用

Question

我有這個代碼，HTML 和 JavaScript。 但是，它不起作用。 我想要做的是，如果電子郵件和密碼字段為空，它應該顯示“請輸入您的電子郵件/密碼。”，我指定在 JavaScript 中使用該 innerText 作為 span 標記發生。 但是，即使我將字段留空，然后單擊提交按鈕（我添加了一個單擊事件偵聽器），它也不會顯示該錯誤消息。 控制台中也沒有顯示任何內容。 該怎么辦？ 這是代碼：

 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>

請幫我。 謝謝！

Answer 1

loginPassword.value 不是 loginPassword

Answer 2

您需要使用e.preventDefault()因為如果您單擊按鈕，它將呈現並且要獲取文本值，您必須使用loginEmail.value而不是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>