function validate() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username == "") {
document.getElementById("message").innerHTML = "USERNAME CANNOT BE EMPTY";
document.getElementById("username").style.borderColor = "red";
return false;
}
if (password == "") {
document.getElementById("message").innerHTML = "PASSWORD CANNOT BE EMPTY";
document.getElementById("password").style.borderColor = "red";
return false;
}
}
#username:focus {
background-color: yellow;
border-color: green;
}
#password:focus {
background-color: yellow;
border-color: green;
}
#message {
color: red;
}
<form onsubmit=" return validate()">
LOGIN:-
<br>
<input id="username" type="text" name="username" placeholder="USERNAME">
<br>
<input id="password" type="password" name="password" placeholder="PASSWORD">
<br>
<input type="submit" value="SUBMIT">
<p id="message">
</form>
- Cuando me concentro en los campos de texto, el color de fondo y borde cambia a amarillo y verde respectivamente (a través de CSS).
- Si hago clic en enviar sin ingresar nada, el color del borde cambia a rojo (a través de JavaScript).
- Pero cuando vuelvo a enfocarme en el campo de texto, el color del borde rojo no desaparece, sino que obtengo bordes verdes y rojos.
Quiero que sea solo verde. ¿Puedes explicar también la razón de este comportamiento?