Remover a cor da borda definida anteriormente

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 snippet

  • Quando me concentro nos campos de texto, a cor do plano de fundo e da borda muda para amarelo e verde respectivamente (através de css).
  • Se eu clicar em enviar sem inserir nada, a cor da borda muda para vermelho (através de javascript).
  • Mas quando troco o foco no campo de texto novamente, a cor da borda vermelha não desaparece; em vez disso, recebo bordas verde e vermelha.

Eu quero que seja apenas verde. Você também pode explicar o motivo desse comportamento.

javascript html css SuperAadi
fonte

Respostas:

10

Isso está acontecendo porque você atualizou o estilo do elemento em vez da CSSpropriedade de classe. O estilo do elemento tem o maior peso para CSS. Em vez disso, adicione uma classe de erro dinamicamente em caso de erro e remova-a quando o campo do formulário for válido.

De acordo com a documentação , a ordem do estilo em ordem decrescente será.

  1. Estilo embutido (dentro de um elemento HTML)
  2. Folhas de estilo externas e internas (na seção principal)
  3. Padrão do navegador

Aqui está um exemplo de trabalho

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 snippet

Nitheesh
fonte
11
Esta resposta deve ser aceita, pois adicionar! Importante não é uma boa abordagem #
Piyush
11
peso já é a palavra que você procura, não é necessário adicionar o sufixo -age.
Emanuel Vintilă
3

O problema é que as cores têm o mesmo nível de importância para o css e, portanto, o código não sabe qual priorizar. Portanto, para corrigir isso, você deve tornar o verde mais importante no código css.

Para fazer isso, altere o código css do foco para ficar assim. 

#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 isto ajude!

Austin Leehealey
fonte
Enquanto isso resolve o problema, estou confuso, por que quando uma propriedade é redefinida com um novo valor, ocorre o problema de priorização ?!
Tick20
Verifique a resposta de @ Geetanjali. Isso lida corretamente com o que você está dizendo.
Hari Das
Essa é uma boa pergunta. Isso ocorre porque, em css, quando você adiciona atributos como 'focus', está adicionando um ouvinte nesse elemento, não o está redefinindo com um novo valor. O atributo, portanto, só entra em vigor quando você está focando nesse elemento.
Austin Leehealey 27/12/19
1

Em vez de adicionar cor do javascript, você pode usar o obrigatório na caixa de entrada e: inválido no CSS. Verifique o trecho

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 snippet

Siva Rm K
fonte
1

Você pode simplesmente reverter a cor da borda na keyup e criar uma nova classe errorpara substituir a cor da borda em vermelho

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 snippet

Geetanjali
fonte
A adição de !importantpropriedade a um elemento no css torna o estilo não atualizável em qualquer instância.
Nitheesh
0

Você está definindo as cores via JS, mas nunca desmarcando-as; portanto, elas estão sendo definidas permanentemente.

Uma maneira de interromper esse comportamento é também adicionar outra função que captura o OnClickevento dos campos de texto e "redefinir" ou unsetas cores quando elas são clicadas dentro.

Dê uma olhada aqui para ter uma idéia de como começar a lidar com o OnClickevento:

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

J. Scott Elblein
fonte
0

Basta adicionar 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
fonte
-1

Porque quando você adiciona cor do javascript ou de qualquer propriedade do css, ele é adicionado inline, então basta escrever o foco border-color !important.

Srijan Saurabh
fonte