Este código no funciona. Si el correo electrónico y la contraseña están vacíos, muestre "Por favor ingrese su correo electrónico y contraseña". Si solo el correo electrónico está vacío, muestra "Ingrese su correo electrónico". Si solo la contraseña está vacía, muestra "Ingrese su contraseña". Si ninguno está vacío, no muestra ningún mensaje de error. Esa es la funcionalidad detrás de este código, sin embargo... no está funcionando. ¿Qué esta pasando? Código:
<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>loginPassword.valor no loginPassword
necesita usar e.preventDefault() porque si hace clic en el botón, se procesará y para obtener el valor del texto debe usar loginEmail.value no 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>