Eliminar el color del borde previamente establecido

20 

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>
Expandir fragmento

  • 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?

javascript html css SuperAadi
fuente

Respuestas:

10

Esto sucede porque ha actualizado el estilo del elemento en lugar de CSSla propiedad de clase. El estilo de elemento tiene el mayor peso 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á.

  1. Estilo en línea (dentro de un elemento HTML)
  2. Hojas de estilo externas e internas (en la sección del encabezado)
  3. Navegador predeterminado

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>
Expandir fragmento

Nitheesh
fuente
1
Esto debería aceptarse como respuesta, ya que agregar! Importante no es un buen enfoque
Piyush
1
peso ya es la palabra que estás buscando, no es necesario agregar el sufijo -age.
Emanuel Vintilă
3

El problema es que los colores tienen el mismo nivel de importancia que CSS y, por lo tanto, el código no sabe cuál priorizar. Entonces, para arreglar eso, debes hacer que el green sea más importante en el código CSS.

Para hacer eso, cambie el código CSS del foco 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!

Austin Leehealey
fuente
Si bien esto resuelve el problema, estoy confundido, ¿por qué cuando una propiedad se restablece con un nuevo valor se produce el problema de priorización?
Marque 20
Verifique la respuesta de @ Geetanjali. Eso maneja correctamente lo que estás diciendo.
Hari Das
Esa es una buena pregunta. Es porque en css cuando agrega atributos como 'foco' está agregando un oyente en ese elemento, no lo está restableciendo con un nuevo valor. Por lo tanto, el atributo solo tiene efecto cuando te estás enfocando en ese elemento.
Austin Leehealey
1

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>
Expandir fragmento

Siva Rm K
fuente
1

Simplemente puede revertir el color del borde en el teclado y crear una nueva clase errorpara 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>
Expandir fragmento

Geetanjali
fuente
Agregar !importantpropiedad a un elemento en css hace que el estilo no sea actualizable en cualquier instancia.
Nitheesh
0

Está configurando los colores a través de JS, pero nunca los desactiva, por lo que esencialmente se configuran de forma permanente.

Una forma de detener este comportamiento es agregar también otra función que detecte el OnClickevento de los campos de texto y "restablecer" o unsetlos colores cuando se hace clic dentro de ellos.

Eche un vistazo aquí para obtener una idea sobre cómo comenzar a manejar el OnClickevento:

https://jsfiddle.net/warunamanjula/qy0hvmyq/1/

J. Scott Elblein
fuente
0

Solo agrega onfocusatributo

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>
Hasan_Naser
fuente
-1

Porque cuando agrega color desde javascript o cualquier propiedad de css, se agrega en línea, así que solo escriba el foco border-color !important.

Srijan Saurabh
fuente