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>Quiero que sea solo verde. ¿Puede también explicar la razón de este comportamiento.
El problema es que los colores tienen el mismo nivel de importancia para css y, por lo tanto, el código no sabe a cuál priorizar. Entonces, para solucionar eso, debe hacer que el verde sea más importante en el código css.
Para hacer eso, cambie el código css de enfoque para que se vea así.
#username:focus { background-color: yellow !important; border-color: green !important; } #password:focus { background-color: yellow !important; border-color: green !important; } #message { color: red; }¡Espero que esto ayude!
Simplemente puede revertir el color del borde en keyup y crear un nuevo error de clase para sobrescribir el color del borde a rojo
function retainColor(ele){ ele.style.borderColor = "inherit"; document.getElementById("message").innerHTML = ""; } 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").classList.add("error"); return false; }else{ document.getElementById("username").classList.remove("error"); } if (password == "") { document.getElementById("message").innerHTML = "PASSWORD CANNOT BE EMPTY"; document.getElementById("password").classList.add("error"); return false; }else{ document.getElementById("password").classList.remove("error"); } } #username:focus { background-color: yellow; border-color: green; } #password:focus { background-color: yellow; border-color: green; } .error { border-color: red; } .error { border-color: red; } #message { color: red; } <form onsubmit=" return validate()"> LOGIN:- <br> <input id="username" type="text" onkeyup="retainColor(this)" name="username" placeholder="USERNAME"> <br> <input id="password" type="password" onkeyup="retainColor(this)" name="password" placeholder="PASSWORD"> <br> <input type="submit" value="SUBMIT"> <p id="message"> </form>Solo agregue el atributo onfocus
JavaScript
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; } } function myfunction(var id){ document.getElementById(id).style.borderColor = "green"; document.getElementById(id).style.background-color= "yellow"; }html
<form onsubmit=" return validate()"> LOGIN:- <br> <input id="username" type="text" onfocus="myFunction('username')" name="username" placeholder="USERNAME"> <br> <input id="password" type="password" onfocus="myFunction('password')" name="password" placeholder="PASSWORD"> <br> <input type="submit" value="SUBMIT"> <p id="message"> </form>Está configurando los colores a través de JS, pero nunca los quita, por lo que esencialmente se configuran de forma permanente.
Una forma de detener este comportamiento es agregar también otra función que capture el evento OnClick de los campos de texto y "restablecer" o unset los colores cuando se haga clic en ellos.
Eche un vistazo aquí para obtener una idea sobre cómo comenzar a manejar el evento OnClick :
Porque cuando agrega color desde javascript, o cualquier propiedad de css, se agrega en línea, así que simplemente escriba focus border-color !important .
Esto sucede porque ha actualizado el estilo del elemento en lugar de la propiedad de la clase CSS . El estilo de elemento tiene el peso más alto para CSS . En su lugar, agregue una clase de error dinámicamente en caso de error y elimínela cuando el campo de formulario sea válido.
Según la documentación , el orden de estilo en orden decreciente será.
Aquí hay un ejemplo de trabajo
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").classList.add("invalidInput"); return false; } else { document.getElementById("username").classList.remove("invalidInput") } if (password == "") { document.getElementById("message").innerHTML = "PASSWORD CANNOT BE EMPTY"; document.getElementById("password").classList.add("invalidInput") return false; } else { document.getElementById("password").classList.remove("invalidInput") } } #username:focus { background-color: yellow; border-color: green; } #password:focus { background-color: yellow; border-color: green; } .invalidInput { border-color: red; } #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"></p> </form>En lugar de agregar color desde javascript, puede usar requerido en el cuadro de entrada y: no válido en CSS. Revisa el fragmento
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; } #username:invalid{ background-color: none; border-color: red; } #password:focus{ background-color: yellow; border-color: green; } #password:invalid{ background-color: none; border-color: red; } #message { color: red; } <form onsubmit=" return validate()"> LOGIN:- <br> <input id="username" type="text" name="username" placeholder="USERNAME" required> <br> <input id="password" type="password" name="password" placeholder="PASSWORD" required> <br> <input type="submit" value="SUBMIT"> <p id="message"> </form>