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>El problema es la expresión del primer if . Desea mostrar el mensaje "Ingrese su correo electrónico y contraseña" si ambos campos están vacíos, pero está utilizando un lógico o || . Al usar un and && lógico, funcionará, y la expresión del else if s se puede simplificar:
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 === "") { loginError.style.visibility = 'visible'; loginError.innerText = "Please enter your email."; } else if (loginPassword.value === "") { loginError.style.visibility = 'visible'; loginError.innerText = "Please enter your password."; } else { loginError.style.visibility = 'hidden'; } }); <input type="text" id="ema"> <input type="password" id="pswd"> <button id="loginBtn">Login</button> <div id="loginError" style="visibility: hidden"> </div>