Rimuovi il colore del bordo precedentemente impostato

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>

Espandi frammento

Quando mi concentro sui campi di testo, il colore di sfondo e bordo cambia rispettivamente in giallo e verde (tramite css).
Se faccio clic su Invia senza inserire nulla, il colore del bordo diventa rosso (tramite JavaScript).
Ma quando riporto l'attenzione sul campo di testo, il colore del bordo rosso non scompare, ma ottengo entrambi i bordi verde e rosso.

Voglio che sia solo verde. Puoi anche spiegare il motivo di questo comportamento.

javascript html css

— SuperAadi
fonte

10

Ciò accade perché hai aggiornato lo stile dell'elemento anziché la CSSproprietà della classe. Lo stile dell'elemento ha il peso più elevato perCSS . Aggiungi invece una classe di errore in modo dinamico in caso di errore e rimuovila quando il campo modulo è valido.

Come da documentazione , l'ordine di stile sarà in ordine decrescente.

Stile incorporato (all'interno di un elemento HTML)
Fogli di stile esterni ed interni (nella sezione head)
Browser predefinito

Ecco un esempio funzionante

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>

Espandi frammento

— Nitheesh
fonte

1

Questa dovrebbe essere una risposta accettata, poiché aggiungere! Importante non è un buon approccio

— Piyush,

1

peso è già la parola che stai cercando, non è necessario aggiungere il suffisso -age.

— Emanuel Vintilă,

3

Il problema è che i colori hanno lo stesso livello di importanza per css e quindi il codice non sa quale dare la priorità. Quindi, per risolvere questo problema, devi rendere il green più importante nel codice CSS.

Per fare ciò, modificare il codice CSS del focus in modo che assomigli a questo.

#username:focus {
  background-color: yellow !important;
  border-color: green !important;
}

#password:focus {
  background-color: yellow !important;
  border-color: green !important;
}

#message {
  color: red;
}

Spero che sia di aiuto!

— Austin Leehealey
fonte

Mentre questo risolve il problema, sono confuso, perché quando una proprietà viene ripristinata con un nuovo valore si verifica il problema di prioritizzazione ?!

— Tick20

Controlla la risposta di @ Geetanjali. Questo gestisce correttamente ciò che stai dicendo.

— Hari Das il

Questa è una buona domanda È perché in CSS quando aggiungi attributi come 'focus' stai aggiungendo un listener su quell'elemento, non lo stai reimpostando con un nuovo valore. L'attributo è quindi attivo solo quando ti stai concentrando su quell'elemento.

— Austin Leehealey,

1

Invece aggiungendo colore da JavaScript puoi usare richiesto nella casella di input e: non valido in CSS. Controlla lo snippet

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>

Espandi frammento

— Siva Rm K
fonte

1

Puoi semplicemente ripristinare il colore del bordo al keyup e creare una nuova classe errorper sovrascrivere il colore del bordo in rosso

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>

Espandi frammento

— Geetanjali
fonte

L'aggiunta di !importantproprietà a un elemento in CSS rende lo stile non aggiornabile in qualsiasi istanza.

— Nitheesh,

0

Stai impostando i colori tramite JS, ma non li annulli mai, quindi essenzialmente vengono impostati in modo permanente.

Un modo per interrompere questo comportamento è aggiungere anche un'altra funzione che intercetta l' OnClickevento dei campi di testo e "resetta" ounset i colori quando vengono cliccati all'interno di.

Dai un'occhiata qui per un'idea su come iniziare a gestire l' OnClickevento:

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

— J. Scott Elblein
fonte

0

Aggiungi l' onfocusattributo

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
fonte

-1

Perché quando aggiungi colore da javascript o da qualsiasi proprietà di CSS, viene aggiunto in linea, quindi scrivi solo focus border-color !important.

— Srijan Saurabh
fonte