Entfernen Sie die zuvor eingestellte Rahmenfarbe

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>
Erweitern Sie das Snippet

  • Wenn ich mich auf die Textfelder konzentriere, ändern sich die Hintergrund- und Rahmenfarbe in Gelb bzw. Grün (über CSS).
  • Wenn ich auf Senden klicke, ohne etwas einzugeben, ändert sich die Rahmenfarbe in Rot (durch Javascript).
  • Aber wenn ich den Fokus wieder auf das Textfeld bringe, verschwindet die rote Randfarbe nicht, sondern ich bekomme sowohl grüne als auch rote Ränder.

Ich möchte, dass es nur grün ist. Können Sie auch den Grund für dieses Verhalten erklären?

javascript html css SuperAadi
quelle

Antworten:

10

Dies geschieht, weil Sie den Elementstil anstelle der CSSKlasseneigenschaft aktualisiert haben . Der Elementstil hat das höchste Gewicht für CSS. Fügen Sie stattdessen eine Fehlerklasse dynamisch bei einem Fehler hinzu und entfernen Sie sie, wenn das Formularfeld gültig ist.

Nach dem Dokumentation ist die Reihenfolge des Stils in absteigender Reihenfolge.

  1. Inline-Stil (innerhalb eines HTML-Elements)
  2. Externe und interne Stylesheets (im Kopfbereich)
  3. Browser Standard

Hier ist ein Arbeitsbeispiel

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>
Erweitern Sie das Snippet

Nitheesh
quelle
1
Dies sollte als Antwort akzeptiert werden, da das Hinzufügen von! Wichtig kein guter Ansatz ist
Piyush
1
Gewicht ist bereits das gesuchte Wort, Sie müssen das Suffix -age nicht hinzufügen.
Emanuel Vintilă
3

Das Problem ist, dass die Farben für CSS die gleiche Bedeutung haben und der Code daher nicht weiß, welche Farben priorisiert werden sollen. Um dies zu beheben, müssen Sie das Grün im CSS-Code wichtiger machen.

Ändern Sie dazu den Fokus-CSS-Code so, dass er so aussieht. 

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

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

#message {
  color: red;
}

Hoffe das hilft!

Austin Leehealey
quelle
Während dies das Problem löst, bin ich verwirrt, warum beim Zurücksetzen einer Eigenschaft mit einem neuen Wert das Priorisierungsproblem auftritt?!
Tick20
Überprüfen Sie die Antwort von @ Geetanjali. Das geht richtig mit dem um, was du sagst.
Hari Das
Das ist eine gute Frage. Dies liegt daran, dass Sie in CSS beim Hinzufügen von Attributen wie "Fokus" einen Listener für dieses Element hinzufügen und es nicht mit einem neuen Wert zurücksetzen. Das Attribut ist daher nur wirksam, wenn Sie sich auf dieses Element konzentrieren.
Austin Leehealey
1

Stattdessen können Sie Farbe aus Javascript hinzufügen, die Sie im Eingabefeld benötigen, und: in CSS ungültig. Überprüfen Sie das 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>
Erweitern Sie das Snippet

Siva Rm K.
quelle
1

Sie können die Rahmenfarbe beim Keyup einfach zurücksetzen und eine neue Klasse erstellen, um die Rahmenfarbe errorin Rot zu überschreiben

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>
Erweitern Sie das Snippet

Geetanjali
quelle
Durch Hinzufügen einer !importantEigenschaft zu einem Element in CSS kann der Stil zu keinem Zeitpunkt aktualisiert werden.
Nitheesh
0

Sie stellen die Farben über JS ein, heben sie jedoch nie wieder auf, sodass sie im Wesentlichen dauerhaft festgelegt werden.

Eine Möglichkeit, dieses Verhalten zu stoppen, besteht darin, eine weitere Funktion hinzuzufügen, die das OnClickEreignis der Textfelder abfängt und unsetdie Farben "zurücksetzt", wenn sie innerhalb von angeklickt werden.

Hier finden Sie eine Idee, wie Sie mit der Abwicklung des OnClickEreignisses beginnen können:

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

J. Scott Elblein
quelle
0

Fügen Sie einfach ein onfocusAttribut hinzu

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
quelle
-1

Denn wenn Sie Farbe aus Javascript oder einer Eigenschaft von CSS hinzufügen, wird diese inline hinzugefügt. Schreiben Sie also einfach den Fokus border-color !important.

Srijan Saurabh
quelle