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>
The problem is the expression of the first if. You want to display the message "Please enter your email and password" if both fields are empty, but you're using a logical or ||. By using a logical and && it will work, and the expression of the else ifs can be simplified:
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>