Hapus warna batas yang sebelumnya ditetapkan

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>
Luaskan cuplikan

  • Ketika saya fokus pada bidang teks, warna latar belakang dan perbatasan berubah menjadi kuning dan hijau masing-masing (melalui css).
  • Jika saya mengklik ajukan tanpa memasukkan apa pun, warna batas berubah menjadi merah (melalui javascript).
  • Tetapi ketika saya membawa fokus pada bidang teks lagi, warna batas merah tidak hilang, sebaliknya saya mendapatkan batas hijau dan merah.

Saya ingin menjadi hijau saja. Bisakah Anda juga menjelaskan alasan perilaku ini.

javascript html css SuperAadi
sumber

Jawaban:

10

Ini terjadi karena Anda telah memperbarui gaya elemen alih-alih CSSproperti kelas. Gaya elemen memiliki bobot tertinggi untuk CSS. Alih-alih menambahkan kelas kesalahan secara dinamis pada kesalahan dan menghapusnya ketika bidang formulir valid.

Sesuai dokumentasi , urutan gaya dalam urutan menurun adalah.

  1. Gaya sebaris (di dalam elemen HTML)
  2. Lembar gaya eksternal dan internal (di bagian kepala)
  3. Default browser

Berikut ini contoh kerjanya

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>
Luaskan cuplikan

Nitheesh
sumber
1
Jawaban ini harus diterima, karena menambahkan! Penting bukan pendekatan yang baik
Piyush
1
berat sudah kata yang Anda cari, tidak perlu menambahkan akhiran -age.
Emanuel Vintilă
3

Masalahnya adalah warna memiliki tingkat kepentingan yang sama dengan css dan karena itu kodenya tidak tahu mana yang harus diprioritaskan. Jadi, untuk memperbaikinya, Anda harus membuat hijau lebih penting dalam kode css.

Untuk melakukan itu, ubah kode fokus css agar terlihat seperti ini. 

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

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

#message {
  color: red;
}

Semoga ini membantu!

Austin Leehealey
sumber
Meskipun ini memecahkan masalah, saya bingung, mengapa ketika sebuah properti diatur ulang dengan nilai baru, terjadi masalah prioritas ?!
Tick20
Periksa jawaban @ Geetanjali. Itu benar menangani apa yang Anda katakan.
Hari Das
Itu pertanyaan yang bagus. Itu karena dalam css ketika Anda menambahkan atribut seperti 'fokus' Anda menambahkan pendengar pada elemen itu, Anda tidak mengatur ulang dengan nilai baru. Atribut karena itu hanya berlaku ketika Anda berfokus pada elemen itu.
Austin Leehealey
1

Alih-alih menambahkan warna dari javascript, Anda dapat menggunakan yang diperlukan di kotak input dan: tidak valid di CSS. Periksa cuplikannya

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>
Luaskan cuplikan

Siva Rm K
sumber
1

Anda cukup mengembalikan warna batas pada keyup dan membuat kelas baru erroruntuk menimpa warna batas menjadi merah

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>
Luaskan cuplikan

Geetanjali
sumber
Menambahkan !importantproperti ke elemen dalam css membuat gaya tidak dapat diupdate kapan pun.
Nitheesh
0

Anda mengatur warna melalui JS, tetapi tidak pernah membatalkan pengaturannya, jadi intinya mereka diatur secara permanen.

Salah satu cara untuk menghentikan perilaku ini adalah dengan juga menambahkan fungsi lain yang menangkap OnClickperistiwa bidang teks, dan "reset" atau unsetwarna ketika mereka diklik di dalamnya.

Lihat di sini untuk ide tentang cara memulai menangani OnClickacara:

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

J. Scott Elblein
sumber
0

Cukup tambahkan onfocusatribut

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
sumber
-1

Karena ketika Anda menambahkan warna dari javascript, atau properti css, itu ditambahkan inline, jadi tulis saja fokus border-color !important.

Srijan Saurabh
sumber