Видаліть раніше встановлений колір рамки

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

— СуперАаді
джерело

10

Це відбувається тому, що ви оновили стиль елемента замість властивості CSSкласу. Стиль елемента має найбільшу вагу для CSS. Замість цього додайте клас помилки динамічно на помилку та видаліть її, коли поле форми дійсне.

Відповідно до документації , буде порядок стилю у порядку зменшення.

Вбудований стиль (всередині елемента HTML)
Зовнішні та внутрішні таблиці стилів (у головному розділі)
За замовчуванням веб-переглядача

Ось робочий приклад

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>

Розгорніть фрагмент

— Нітеєш
джерело

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, коли ви додаєте такі атрибути, як "фокус", ви додаєте слухача до цього елемента, ви не скидаєте його з новим значенням. Тому атрибут діє лише тоді, коли ви зосереджуєтесь на цьому елементі.

— Остін Ліхілі

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

Ви можете просто повернути колір рамки на клавіатурі та створити новий клас, 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>

Розгорніть фрагмент

— Гетанджалі
джерело

Додавання !importantвластивості до елемента css робить стиль не оновленим у будь-якому випадку.

— Нітеєш

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.

— Сріан Саурах
джерело