Önceden ayarlanan kenarlık rengini kaldır

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>
Snippet'i genişlet

  • Metin alanlarına odaklandığımda, arka plan ve kenarlık rengi sırasıyla sarı ve yeşil olur (css aracılığıyla).
  • Hiçbir şey girmeden gönder'i tıklarsam, kenarlık rengi kırmızıya (javascript aracılığıyla) dönüşür.
  • Ama tekrar metin alanına odaklandığımda, kırmızı kenarlık rengi kaybolmuyor, bunun yerine hem yeşil hem de kırmızı kenarlıkları alıyorum.

Sadece yeşil olmasını istiyorum. Bu davranışın nedenini de açıklayabilir misiniz?

javascript  html  css 
— SuperAadi
kaynak

Yanıtlar:

10

Bu, CSSclass özelliği yerine öğe stilini güncellediğiniz için oluyor . Eleman stili en yüksek ağırlığa sahiptir CSS. Bunun yerine hata halinde dinamik olarak bir hata sınıfı ekleyin ve form alanı geçerli olduğunda sınıfını kaldırın.

Gereğince belgeleri , azalan sırayla tarzı sırası olacaktır.

  1. Satır içi stil (HTML öğesinin içinde)
  2. Dış ve iç stil sayfaları (baş bölümünde)
  3. Tarayıcı varsayılanı

İşte çalışan bir örnek

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>
Snippet'i genişlet

— Nitheesh
kaynak
1
Bu önemli bir cevap olarak kabul edilmelidir, çünkü! Önemli eklemek iyi bir yaklaşım değildir
— Piyush
1
ağırlık zaten aradığınız kelimedir, -age son ekini eklemenize gerek yoktur.
— Emanuel Vintilă
3

Sorun, renklerin css için aynı önem düzeyine sahip olması ve bu nedenle kodun hangisine öncelik vereceğini bilmemesi. Yani, bunu düzeltmek için css kodunda yeşili daha önemli hale getirmelisiniz.

Bunu yapmak için css kodunu bu şekilde görünecek şekilde değiştirin. 

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

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

#message {
  color: red;
}

Bu yardımcı olur umarım!

— Austin Leehealey
kaynak
Bu sorunu çözerken, kafam karıştı, neden bir özellik yeni bir değerle sıfırlandığında önceliklendirme sorunu oluşuyor ?!
— Tick20
@ Geetanjali'nin cevabını kontrol edin. Bu, söylediklerinizi doğru şekilde işler.
— Hari Das
Bu iyi bir soru. Çünkü css'de 'odak' gibi özellikler eklediğinizde o öğeye bir dinleyici ekliyorsunuz, onu yeni bir değerle sıfırlamıyorsunuz. Bu nedenle özellik yalnızca o öğeye odaklandığınızda geçerlidir.
— Austin Leehealey
1

Bunun yerine javascript'ten renk eklemek için giriş kutusunda gerekli olanları kullanabilirsiniz: CSS'de: geçersiz. Snippet'i kontrol edin

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>
Snippet'i genişlet

— Siva Rm K
kaynak
1

Tuş takımındaki kenarlık rengini geri döndürebilir ve errorkenarlık renginin kırmızıya yazılması için yeni bir sınıf oluşturabilirsiniz

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>
Snippet'i genişlet

— Geetanjali
kaynak
Css'deki !importantbir öğeye özellik eklemek , stili hiçbir durumda güncellenemez hale getirir.
— Nitheesh
0

Renkleri JS ile ayarlıyorsunuz, ancak hiçbir zaman ayarını kaldırmıyorsunuz, bu yüzden aslında kalıcı olarak ayarlanıyorlar.

Bu davranışı durdurmanın bir yolu da OnClickmetin alanlarının olayını yakalayan başka bir işlev eklemek ve unsetiçine tıklandığında "sıfırlama" veya renkleri eklemektir .

OnClickEtkinliği nasıl kullanmaya başlayacağınız hakkında bir fikir edinmek için buraya göz atın :

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

— J. Scott Elblein
kaynak
0

Sadece onfocusözellik ekleyin

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

Javascript veya herhangi bir css özelliği renk eklediğinizde, satır içi eklenir, bu yüzden sadece odak yazma border-color !important.

— Srijan Saurabh
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.