Remove previously set border color

Question

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>

• When i focus on the text fields, the background and border color changes to yellow and green respectively (through css).
• If i click on submit without entering anything, the border color changes to red (through javascript).
• But when i bring the focus on the text field again, the red border color does not go away, instead i get both green and red borders.

I want it to be green only. Can you also explain the reason for this behavior.

Answer 1

This is happening because you have updated the element style instead of CSS class property. Element style has the highest weight for CSS. Instead add an error class dynamically on error and remove it when the form field is valid.

As per the documentation, the order of style in decreasing order will be.

1. Inline style (inside an HTML element)
2. External and internal style sheets (in the head section)
3. Browser default

Here is a working example

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>

Answer 2

You can simply revert the border color on keyup and create a new class error to overwrite border color to red

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>

Answer 3

Instead adding color from javascript you can use required in input box and :invalid in CSS. Check the 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>

Answer 4

Just add onfocus attribute

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>

Answer 5

Because when you add color from javascript, or any property of css, it's added inline, so just write focus border-color !important.

Answer 6

You're setting the colors via JS, but never un-setting them, so essentially they're being set permanently.

One way to stop this behavior is to also add another function that catches the OnClick event of the text fields, and "reset" or unset the colors when they're get clicked inside of.

Have a look here for an idea on how to get started handling the OnClick event:

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

Answer 7

The problem is the colors have the same level of importance to css and therefore the code does not know which one to prioritize. So, to fix that, you have to make the green more important in the css code.

To do that change the focus css code to look like this.

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

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

#message {
  color: red;
}

Hope this helps!