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).
- Но когда я снова фокусируюсь на текстовом поле, цвет красной границы не исчезает, вместо этого я получаю как зеленую, так и красную границы.
Я хочу, чтобы он был только зеленым. Можете ли вы также объяснить причину такого поведения.