Supprimer la couleur de bordure précédemment définie

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>
Développer l'extrait

  • Lorsque je me concentre sur les champs de texte, la couleur d'arrière-plan et de bordure passe respectivement au jaune et au vert (via css).
  • Si je clique sur soumettre sans rien saisir, la couleur de la bordure devient rouge (via javascript).
  • Mais lorsque je ramène le focus sur le champ de texte, la couleur de la bordure rouge ne disparaît pas, mais j'obtiens à la fois des bordures vertes et rouges.

Je veux qu'il soit vert seulement. Pouvez-vous également expliquer la raison de ce comportement.

javascript html css SuperAadi
la source

Réponses:

10

Cela se produit car vous avez mis à jour le style d'élément au lieu de CSSla propriété de classe. Le style d'élément a le poids le plus élevé CSS. Ajoutez à la place une classe d'erreur dynamiquement en cas d'erreur et supprimez-la lorsque le champ du formulaire est valide.

Selon la documentation , l'ordre de style en ordre décroissant sera.

  1. Style en ligne (à l'intérieur d'un élément HTML)
  2. Feuilles de style externes et internes (dans la section tête)
  3. Navigateur par défaut

Voici un exemple de travail

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>
Développer l'extrait

Nitheesh
la source
1
Cette réponse devrait être acceptée, car l'ajout! Important n'est pas une bonne approche
Piyush
1
le poids est déjà le mot que vous recherchez, pas besoin d'ajouter le suffixe -age.
Emanuel Vintilă
3

Le problème est que les couleurs ont le même niveau d'importance pour CSS et donc le code ne sait pas lequel prioriser. Donc, pour résoudre ce problème, vous devez rendre le vert plus important dans le code CSS.

Pour ce faire, changez le code CSS de focus pour qu'il ressemble à ceci. 

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

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

#message {
  color: red;
}

J'espère que cela t'aides!

Austin Leehealey
la source
Bien que cela résout le problème, je suis confus, pourquoi lorsqu'une propriété est réinitialisée avec une nouvelle valeur, le problème de priorité se produit?!
Tick20
Vérifiez la réponse de @ Geetanjali. Cela gère correctement ce que vous dites.
Hari Das
Voilà une bonne question. C'est parce que dans css lorsque vous ajoutez des attributs tels que «focus», vous ajoutez un écouteur sur cet élément, vous ne le réinitialisez pas avec une nouvelle valeur. L'attribut n'est donc en vigueur que lorsque vous vous concentrez sur cet élément.
Austin Leehealey
1

Au lieu d'ajouter de la couleur à partir de javascript, vous pouvez utiliser requis dans la zone de saisie et: invalide en CSS. Vérifier l'extrait

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>
Développer l'extrait

Siva Rm K
la source
1

Vous pouvez simplement rétablir la couleur de la bordure lors de la saisie et créer une nouvelle classe errorpour remplacer la couleur de la bordure par du rouge

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>
Développer l'extrait

Geetanjali
la source
L'ajout de !importantpropriété à un élément dans css rend le style non actualisable à n'importe quelle instance.
Nitheesh
0

Vous définissez les couleurs via JS, mais ne les désactivez jamais, donc elles sont essentiellement définies de manière permanente.

Une façon d'arrêter ce comportement consiste également à ajouter une autre fonction qui intercepte l' OnClickévénement des champs de texte et à "réinitialiser" ou unsetles couleurs lorsqu'ils sont cliqués à l'intérieur de.

Jetez un œil ici pour une idée sur la façon de commencer à gérer l' OnClickévénement:

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

J. Scott Elblein
la source
0

Ajoutez simplement un onfocusattribut

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
la source
-1

Parce que lorsque vous ajoutez de la couleur à partir de javascript ou d'une propriété de css, elle est ajoutée en ligne, alors écrivez simplement focus border-color !important.

Srijan Saurabh
la source