पहले से तय सीमा रंग हटा दें

Question

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>

• जब मैं टेक्स्ट फ़ील्ड पर ध्यान केंद्रित करता हूं, तो पृष्ठभूमि और सीमा का रंग क्रमशः पीले और हरे रंग में बदल जाता है (सीएसएस के माध्यम से)।
• अगर मैं कुछ भी दर्ज किए बिना सबमिट पर क्लिक करता हूं, तो बॉर्डर का रंग लाल (जावास्क्रिप्ट के माध्यम से) बदल जाता है।
• लेकिन जब मैं फ़ोकस को फिर से टेक्स्ट फील्ड पर लाता हूं, तो लाल बॉर्डर का रंग नहीं जाता, इसके बजाय मुझे ग्रीन और रेड दोनों बॉर्डर मिलते हैं।

मैं चाहता हूं कि यह केवल हरा हो। क्या आप इस व्यवहार का कारण भी बता सकते हैं।

Answer 1

ऐसा इसलिए हो रहा है क्योंकि आपने इसके बदले तत्व शैली को अपडेट कर दिया है CSS क्लास प्रॉपर्टी के । तत्व शैली में सबसे अधिक वजन होता है CSS। इसके बजाय एक त्रुटि वर्ग को गतिशील रूप से त्रुटि पर जोड़ें और जब प्रपत्र फ़ील्ड मान्य हो तो इसे हटा दें।

के अनुसार प्रलेखन के , घटते क्रम में शैली का क्रम होगा।

1. इनलाइन शैली (एक HTML तत्व के अंदर)
2. बाहरी और आंतरिक स्टाइल शीट (हेड सेक्शन में)
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>

Comments

इसे स्वीकार किया जाना चाहिए, क्योंकि जोड़ना महत्वपूर्ण नहीं एक अच्छा तरीका है

— पीयूष

वजन पहले से ही आप के लिए देख रहे शब्द है, कोई-प्रत्यय जोड़ने की जरूरत नहीं है।

— इमानुएल विंटिलो

Answer 2

समस्या यह है कि रंगों का 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;
}

उम्मीद है की यह मदद करेगा!

Comments

हालांकि यह समस्या को हल करता है, मैं उलझन में हूं, जब एक संपत्ति को नए मूल्य के साथ रीसेट किया जाता है तो प्राथमिकता का मुद्दा क्यों होता है ?!

— टिक 20

@ गीतांजलि के उत्तर की जाँच करें। जो आप कह रहे हैं उसे सही ढंग से संभालता है।

— हरि दास

यह अच्छा सवाल है। ऐसा इसलिए है क्योंकि सीएसएस में जब आप 'फोकस' जैसी विशेषताओं को जोड़ते हैं, तो आप उस तत्व पर एक श्रोता जोड़ रहे हैं, आप इसे नए मूल्य के साथ रीसेट नहीं कर रहे हैं। विशेषता केवल इसलिए प्रभावी होती है जब आप उस तत्व पर ध्यान केंद्रित कर रहे होते हैं।

— ऑस्टिन लीहेले

Answer 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").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>

Answer 4

आप बस कीप पर सीमा के रंग को वापस कर सकते हैं और 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>

Comments

!importantCss में एक एलिमेंट में प्रॉपर्टी को जोड़ने से स्टाइल बिना किसी उदाहरण के अपग्रेड योग्य हो जाता है।

— नितेश

Answer 5

आप रंगों को JS के माध्यम से सेट कर रहे हैं, लेकिन उन्हें कभी भी अन-सेटिंग न करें, इसलिए अनिवार्य रूप से वे स्थायी रूप से सेट हो रहे हैं।

इस व्यवहार को रोकने का एक तरीका यह भी है कि OnClickपाठ क्षेत्र की घटना को पकड़ने वाला एक और फ़ंक्शन , और "रीसेट" या जोड़ेंunset रंग जब वे अंदर क्लिक किए जाते हैं हैं।

एक विचार के लिए यहां देखें कि कैसे संभालना शुरू किया जाए OnClick घटना को :

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

Answer 6

बस onfocusविशेषता जोड़ें

जावास्क्रिप्ट

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";
}

एचटीएमएल

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

Answer 7

क्योंकि जब आप जावास्क्रिप्ट, या सीएसएस की किसी भी संपत्ति से रंग जोड़ते हैं, तो यह इनलाइन जोड़ा जाता है, इसलिए बस फोकस लिखें border-color !important।