Usuń poprzednio ustawiony kolor obramowania

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>
Rozwiń fragment kodu

  • Kiedy skupiam się na polach tekstowych, kolor tła i obramowania zmienia się odpowiednio na żółty i zielony (poprzez css).
  • Jeśli kliknę przycisk Prześlij bez wprowadzania danych, kolor obramowania zmieni się na czerwony (przez javascript).
  • Ale kiedy ponownie skupiam się na polu tekstowym, czerwony kolor obramowania nie znika, zamiast tego otrzymuję zarówno zielone, jak i czerwone obramowania.

Chcę, żeby była tylko zielona. Czy możesz również wyjaśnić przyczynę tego zachowania.

javascript html css SuperAadi
źródło

Odpowiedzi:

10

Dzieje się tak, ponieważ zaktualizowałeś styl elementu zamiast CSSwłaściwości klasy. Styl elementu ma najwyższą wagę CSS. Zamiast tego dynamicznie dodaj klasę błędu w przypadku błędu i usuń ją, gdy pole formularza jest prawidłowe.

Zgodnie z dokumentacją kolejność stylu w malejącej kolejności będzie.

  1. Styl wbudowany (wewnątrz elementu HTML)
  2. Zewnętrzne i wewnętrzne arkusze stylów (w sekcji głowy)
  3. Domyślna przeglądarka

Oto działający przykład

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>
Rozwiń fragment kodu

Nitheesh
źródło
1
Należy zaakceptować odpowiedź, ponieważ dodanie! Ważne nie jest dobrym podejściem
Piyush
1
waga jest już słowem, którego szukasz, nie musisz dodawać sufiksu -age.
Emanuel Vintilă
3

Problem polega na tym, że kolory mają ten sam poziom ważności co css, a zatem kod nie wie, który z nich ma priorytet. Aby to naprawić, musisz uczynić zielony ważniejszym w kodzie css.

Aby to zrobić, zmień kod css fokusa, aby wyglądał następująco. 

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

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

#message {
  color: red;
}

Mam nadzieję że to pomoże!

Austin Leehealey
źródło
Chociaż to rozwiązuje problem, jestem zdezorientowany, dlaczego po zresetowaniu właściwości z nową wartością pojawia się problem z ustalaniem priorytetów ?!
Tick20,
Sprawdź odpowiedź @ Geetanjali. To poprawnie obsługuje to, co mówisz.
Hari Das,
To jest dobre pytanie. Jest tak, ponieważ w css, gdy dodajesz atrybuty, takie jak „focus”, dodajesz detektor do tego elementu, nie resetujesz go z nową wartością. Atrybut działa zatem tylko wtedy, gdy skupiasz się na tym elemencie.
Austin Leehealey
1

Zamiast dodawać kolor z javascript, możesz użyć pola wymaganego i: niepoprawnego w CSS. Sprawdź fragment kodu

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>
Rozwiń fragment kodu

Siva Rm K
źródło
1

Możesz po prostu przywrócić kolor obramowania podczas tworzenia klucza i utworzyć nową klasę, erroraby zastąpić kolor obramowania na czerwony

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>
Rozwiń fragment kodu

Geetanjali
źródło
Dodanie !importantwłaściwości do elementu w css powoduje, że styl nie może być aktualizowany w żadnym przypadku.
Nitheesh,
0

Ustawiasz kolory za pomocą JS, ale nigdy ich nie odznaczasz, więc zasadniczo są one ustawiane na stałe.

Jednym ze sposobów na powstrzymanie tego zachowania jest także dodanie innej funkcji, która przechwytuje OnClickzdarzenie pól tekstowych i „resetuje” lub unsetkolory po kliknięciu w nie.

Sprawdź tutaj, jak rozpocząć obsługę tego OnClickwydarzenia:

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

J. Scott Elblein
źródło
0

Po prostu dodaj onfocusatrybut

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
źródło
-1

Ponieważ kiedy dodajesz kolor z javascript lub jakiejkolwiek właściwości css, jest on dodawany bezpośrednio, więc po prostu napisz fokus border-color !important.

Srijan Saurabh
źródło