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

Question

का उपयोग कर टेक्स्टबॉक्स सीमा रंग बदलना मैं फॉर्म सत्यापन कर रहा हूं। जब फॉर्म इनपुट गलत है तो मैं टेक्स्टबॉक्स में एक लाल सीमा जोड़ता हूं:

document.getElementById("fName").style.borderColor="#FF0000" 

यह मुझे 2px लाल सीमा देता है। क्या मैं करना चाहता हूँ एक सही मान में उपयोगकर्ता putas वापस मूल सीमा पर जाने के लिए करता है, तो है ...

कोई मुझे बता सकता है कि मैं जावास्क्रिप्ट में सीमा आकार और रंग बदलने

Answer 1

आप इस्तेमाल कर सकते हैं jQuery और:

Change border-bottom color using jquery?

Answer 2

document.getElementById("fName").style.borderColor="";

आप सभी सीमा रंग वापस बदलने की जरूरत है।

सीमा आकार बदलने के लिए, element.style.borderWidth = "1px" का उपयोग करें।

Answer 3

बजाय सीएसएस वर्ग

सीएसएस

.error { 
    border:2px solid red; 
} 

अब जावास्क्रिप्ट में साथ उपयोग सीएसएस शैलियों

document.getElementById("fName").className = document.getElementById("fName").className + " error"; // this adds the error class 

document.getElementById("fName").className = document.getElementById("fName").className.replace(" error", ""); // this removes the error class 

मुख्य कारण मैं इस लगता है उल्लेख आप बदलना चाहते हैं ग़लत तत्व की सीमा का रंग। यदि आप अपना रास्ता चुनते हैं तो आपको कोड में कई स्थानों को संशोधित करने की आवश्यकता होगी। यदि आप अपना रास्ता चुनते हैं तो आप स्टाइल शीट को आसानी से संपादित कर सकते हैं।

Answer 4

document.getElementById("fName").style.border="1px solid black"; 

Answer 5

मैं वीसेंट प्लाटा से सहमत हूं, आपको jQuery IMHO का उपयोग करने का प्रयास करना चाहिए सबसे अच्छी जावास्क्रिप्ट लाइब्रेरी है। आप अपने सीएसएस फ़ाइल में एक वर्ग बना सकते हैं और बस jQuery के साथ निम्न कार्य करें: LOL डी:

$('#fName').addClass('name_of_the_class'); 

और बस इतना ही है, और निश्चित रूप से आप ब्राउज़रों के असंगति के बारे में चिंतित नहीं होगा, कि jQuery की टीम समस्या है

Answer 6

अपने इनपुट तत्व को एक onchange घटना जोड़ें:

<input type="text" id="fName" value="" onchange="fName_Changed(this)" /> 

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

function fName_Changed(fName) 
{ 
    fName.style.borderColor = (fName.value != 'correct text') ? "#FF0000"; : fName.style.borderColor=""; 
} 

Answer 7

आप

document.getElementById('name').style.borderColor='#e52213'; 
document.getElementById('name').style.border='solid';