Удалить ранее установленный цвет границы

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>
Развернуть фрагмент

  • Когда я фокусируюсь на текстовых полях, цвет фона и границы меняется на желтый и зеленый соответственно (через css).
  • Если я нажимаю на кнопку «Отправить», ничего не вводя, цвет границы меняется на красный (через javascript).
  • Но когда я снова фокусируюсь на текстовом поле, цвет красной границы не исчезает, вместо этого я получаю как зеленую, так и красную границы.

Я хочу, чтобы он был только зеленым. Можете ли вы также объяснить причину такого поведения.

javascript html css SuperAadi
источник

Ответы:

10

Это происходит потому, что вы обновили стиль элемента вместо CSSсвойства класса. Элемент стиля имеет наибольший вес для CSS. Вместо этого добавьте класс ошибки динамически при ошибке и удалите его, когда поле формы допустимо.

Согласно документации , порядок стиля в порядке убывания будет.

  1. Встроенный стиль (внутри элемента HTML)
  2. Внешние и внутренние таблицы стилей (в разделе head)
  3. Браузер по умолчанию

Вот рабочий пример

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>
Развернуть фрагмент

Nitheesh
источник
1
Это должно быть принято отвечать, как добавление важно не хороший подход!
Piyush
1
Вес - это слово, которое вы ищете, не нужно добавлять суффикс -age.
Эмануэль Винтилэ
3

Проблема в том, что цвета имеют одинаковый уровень важности для css, и поэтому код не знает, какой из них нужно расставить по приоритетам. Итак, чтобы исправить это, вы должны сделать зеленый цвет более важным в коде CSS.

Для этого измените код CSS фокуса, чтобы он выглядел следующим образом. 

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

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

#message {
  color: red;
}

Надеюсь это поможет!

Остин Лихили
источник
Хотя это решает проблему, я запутался, почему, когда свойство сбрасывается с новым значением, возникает проблема расстановки приоритетов ?!
Tick20
Проверьте ответ @ Geetanjali. Это правильно обрабатывает то, что вы говорите.
Хари Дас
Это хороший вопрос. Это потому, что в CSS, когда вы добавляете такие атрибуты, как 'focus', вы добавляете прослушиватель для этого элемента, вы не сбрасываете его с новым значением. Атрибут поэтому действует только тогда, когда вы фокусируете внимание на этом элементе.
Остин Лихили
1

Вместо добавления цвета из JavaScript вы можете использовать обязательные для ввода поля и: недействительно в CSS. Проверьте фрагмент

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>
Развернуть фрагмент

Шива Рм К
источник
1

Вы можете просто вернуть цвет границы в keyup и создать новый класс, errorчтобы перезаписать цвет границы на красный

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>
Развернуть фрагмент

Geetanjali
источник
Добавление !importantсвойства к элементу в css делает стиль не обновляемым в любом случае.
Nitheesh
0

Вы устанавливаете цвета с помощью JS, но никогда не отменяете их, так что по сути они устанавливаются постоянно.

Один из способов остановить это поведение - добавить еще одну функцию, которая перехватывает OnClickсобытие текстовых полей, и «сбросить» или unsetцвета, когда они щелкаются внутри.

Посмотрите здесь идею о том, как начать работу с OnClickсобытием:

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

Дж. Скотт Элблейн
источник
0

Просто добавьте onfocusатрибут

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
источник
-1

Потому что, когда вы добавляете цвет из javascript или любого свойства CSS, он добавляется внутри строки, поэтому просто пишите фокус border-color !important.

Сриджан Саурабх
источник