एचटीएमएल 5 टेक्स्टबॉक्स मान्य कर रहा हूँ। यदि फ़ॉर्म सबमिट करते समय मान मौजूद नहीं है, तो मैं केवल उस टेक्स्टबॉक्स BorederColor को red पर हाइलाइट करना चाहता हूं। यदि मान मौजूद है, तो मैं टेक्स्ट बॉक्स के डिफ़ॉल्ट व्यवहार के साथ जाना चाहता हूं।

कृपया नीचे मेरा कोड खोजें। यदि मूल्य मौजूद नहीं है तो मैं सीमा रंग को red के रूप में दिखाने में सक्षम हूं। लेकिन, टेक्स्टबॉक्स में मान मौजूद होने पर टेक्स्टबॉक्स (जैसे डिफ़ॉल्ट सीमा रंग) के डिफ़ॉल्ट व्यवहार को रीसेट करने में सक्षम नहीं हूं। मुझे यकीन नहीं है, यहाँ क्या गलत हो रहा है।

var check = document.getElementById('first_name').value;
if ( check == "") {
    document.getElementById('first_name').style.borderColor = "red";
} else {
    document.getElementById('first_name').style.borderColor = "#eee";
}
0
Karthikeyan 30 मार्च 2018, 20:32

3 जवाब

सबसे बढ़िया उत्तर

केवल निम्नलिखित कोड मेरे लिए काम कर रहा है।

var check = document.getElementById('first_name').value;
    if (check == "") {
          document.getElementById('first_name').style.borderColor = "red";
    } else {
          document.getElementById('first_name').style.borderColor = "";
   }
}
0
Karthikeyan 31 मार्च 2018, 18:53

आपको एक ईवेंट श्रोता को बाइंड करना होगा onchange

var el = document.getElementById('first_name');

el.addEventListener('onchange', function(){
  var check = document.getElementById('first_name').value;
  if ( check == "") {
    document.getElementById('first_name').style.borderColor = "red";
  } else {
    document.getElementById('first_name').style.borderColor = "#eee";
  }
})
0
Rusty 30 मार्च 2018, 18:15

इसके लिए आपको JS की भी जरूरत नहीं है

<style>/*only need one of these for all your inputs*/
input:invalid {
  border: 2px solid red;
}
</style>

<input type="text" required/>

आगे पढ़ने के लिए https://developer.mozilla.org/en पर पढ़ें -यूएस/दस्तावेज़/जानें/एचटीएमएल/फॉर्म/फॉर्म_सत्यापन

0
dtanders 30 मार्च 2018, 18:03