फ़ायरफ़ॉक्स 4: क्या आवश्यक फॉर्म इनपुट में लाल सीमा को हटाने का एक तरीका है?

Question

जब आवश्यक रूप को एक फ़ील्ड में परिभाषित किया जाता है, तो फ़ायरफ़ॉक्स 4 स्वचालित रूप से इस तत्व को एक लाल बॉर्डर दिखाता है, यहां तक ​​कि उपयोगकर्ता द्वारा सबमिट बटन को हिट करने से पहले।

<input type="text" name="example" value="This is an example" required />

मुझे लगता है कि यह उपयोगकर्ता के लिए परेशान करने वाला है क्योंकि उसने शुरुआत में गलती नहीं की थी।

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

मैंने नए छद्म चयनकर्ता को देखा :requiredऔर :invalidउनसे देखा , लेकिन सत्यापन के पहले और बाद में बदलाव हुए हैं । ( फ़ायरफ़ॉक्स 4 आवश्यक इनपुट फॉर्म RED बॉर्डर / आउटलाइन से )

क्या उपयोगकर्ता द्वारा फ़ॉर्म सबमिट करने से पहले लाल बॉर्डर को अक्षम करने का एक तरीका है, और कुछ लापता फ़ील्ड होने पर इसे दिखा सकते हैं?

Comments

कैसे रूपरेखा के बारे में: 0; ?

— ऐस

Answer 1

यह थोड़ा मुश्किल था, लेकिन मैंने यह एक्सैम्पल सेट किया है: http://jsfiddle.net/c5aTe/ जो मेरे लिए काम कर रहा है। मूल रूप से ट्रिक प्लेसहोल्डर टेक्स्ट के आस-पास हो रही है जो कि अमान्य है। अन्यथा आपको यह करने में सक्षम होना चाहिए:

input:required {
    box-shadow:none;
}
input:invalid {
    box-shadow:0 0 3px red;
}

या कुछ इसी तरह ...

लेकिन जब से FF4 अपने प्लेसहोल्डर पाठ (कोई विचार नहीं क्यों ...) को हल करने का फैसला करता है, तो फिडल में समाधान (थोड़ा हैकी - उपयोग !important) की आवश्यकता होती है।

उम्मीद है की वो मदद करदे!

संपादित करें

रवींद्र !! - मैं मूर्खतापूर्ण महसूस करता हूं। मैंने अपनी फिडेल को अपडेट कर दिया है: http://jsfiddle.net/c5aTe/2/ - आप :focusछद्म वर्ग का उपयोग तत्व को स्टाइल रखने के लिए कर सकते हैं जैसे कि उपयोगकर्ता टाइप करते समय मान्य है। यह तब भी लाल रंग में हाइलाइट होगा यदि आइटम अमान्य है जब आइटम फोकस खो देता है लेकिन मुझे लगता है कि केवल इतना ही है कि आप डिज़ाइन किए गए व्यवहार के साथ क्या कर सकते हैं ...

HTH :)

---

स्वीकृति के बाद EDIT:

ओपी के अनुरोध पर उदाहरणों का सारांश (ध्यान दें कि पहले दो केवल FF4 के लिए डिज़ाइन किए गए हैं - क्रोम नहीं )

1. अपने स्थान धारक पाठ को मान्य करने वाले FF के लिए फिक्स: http://jsfiddle.net/c5aTe/
2. जैसे ही आप टाइप करते हैं, एफएफ सत्यापन के लिए फिक्स: http://jsfiddle.net/c5aTe/2
3. जेएस समाधान टॉगल करने की शैली / मान्यता: http://jsfiddle.net/c5aTe/4

Comments

शानदार सफलता, लेकिन "अमान्य" त्रुटि तब दिखाई देती है जब उपयोगकर्ता इनपुट पर क्लिक करता है => जब इनपुट खाली होता है, तो वास्तव में वह कुछ लिखता है। लेकिन शायद जो मैं चाहता हूं वह एफएफ 4 में एक बग है जिसे हल नहीं किया जा सकता है: /

— सिरिल एन

लेकिन भयानक लाल बॉक्स छाया को सीमित करने के अपने तरीके के लिए +1 :)

— सिरिल एन

नहीं लगता कि आप ऐसा कर सकते हैं, क्योंकि अजीब बात है, यह लगभग बहुत चालाक है और मक्खी पर मान्य है। आप कुछ अतिरिक्त जावास्क्रिप्ट के साथ होशियार हो सकते हैं जो जमा होने पर फॉर्म से एक कक्षा को जोड़ते या हटाते हैं। फिर आप उस वर्ग के मौजूद होने या न होने के आधार पर किसी भी मान्यता हाइलाइटिंग को ओवरराइड कर सकते हैं। इसके बारे में अच्छी बात यह है कि यह अभी भी देशी सत्यापन का उपयोग कर रहा है इतना अच्छा नहीं अतिरिक्त js की आवश्यकता है ...: |

— स्टुअर्ट ने

नाश्ता बनाते समय कुछ प्रेरणा मिली - ऊपर जोड़ा!

— स्टुअर्ट बर्न्स

चालाक! : p लेकिन यदि आप एक नज़र डालते हैं, तो आपके पास मूल स्थिति के लिए छाया है और अमान्य स्थिति के लिए बॉक्स छाया है। दोनों को दिखाया गया है। मुझे विश्वास है कि यह मोज़िला से एक गलती है, वे प्रारंभिक राज्य के बारे में नहीं सोचा था। यदि यह सही है और कोई अन्य इसे करने के लिए पूरी तरह से काम नहीं करता है, तो मैं आपके उत्तर को स्वीकार नहीं करूंगा लेकिन मैं आपको इनाम दूंगा (आशा है कि यह संभव है, यदि नहीं, तो मैं आपके उत्तर को स्वीकार करूंगा)। आप इसके लायक हैं :) आपकी मदद के लिए धन्यवाद!

— सिरिल एन।

Answer 2

फ़ायरफ़ॉक्स 26 के रूप में, अवैध आवश्यक फ़ील्ड्स की पहचान करने के लिए उपयोग किया जाने वाला वास्तविक CSS निम्नानुसार है (फ़ॉर्म से आता है)।

:not(output):-moz-ui-invalid {
    box-shadow: 0 0 1.5px 1px red;
}

अन्य ब्राउज़रों में दोहराने के लिए, मैं उपयोग करता हूं:

input:invalid {
    box-shadow: 0 0 1.5px 1px red;
}

मैं पिक्सेल सेटिंग्स के साथ खेलता था, लेकिन मैंने कभी भी moz स्रोत को देखे बिना 1.5px का अनुमान नहीं लगाया था।

इसे अक्षम करने के लिए, आप इसका उपयोग कर सकते हैं:

input:invalid {
    box-shadow: none;
}

Comments

छोटी सटीकता: यह उन लोगों के लिए :not(output):-moz-ui-invalidनहीं होनी चाहिए input:not(output):-moz-ui-invalidजिन्होंने इसे पसंद किया।

— स्कौआ

आप एक परम कथा हैं।

— अबजदानील्स

Answer 3

यहाँ एक बहुत ही आसान उपाय है जो मेरे लिए काम करता है। मैंने मूल रूप से बदसूरत लाल को बहुत अच्छे नीले रंग में बदल दिया, जो गैर-आवश्यक क्षेत्रों के लिए मानक रंग है, और एक वेब सम्मेलन:

:required {
    border-color: rgba(82, 168, 236, 0.8);
}

Answer 4

इसने मेरे लिए अच्छा काम किया:

input:invalid {
     -moz-box-shadow: none;
}

Comments

यहां समस्या यह है कि सत्यापन के बाद, बॉक्स छाया कोई भी नहीं रहता है और उपयोगकर्ता को कोई भी सुराग नहीं है कि त्रुटियां कहां हैं। मैं चाहता हूं कि फॉर्म की सामान्य स्थिति में लाल बॉर्डर प्रदर्शित नहीं करना है, लेकिन जब कोई त्रुटि होती है तो उपयोगकर्ता फॉर्म सबमिट / ब्लर करता है।

— सिरिल एन

Answer 5

प्रयत्न:

document.getElementById('myform').reset();

Answer 6

कृपया यह प्रयास करें,

$ ( "फार्म") attr ( "novalidate", सच)।

अपने वैश्विक .js फ़ाइल या शीर्ष लेख अनुभाग में आपके फ़ॉर्म के लिए।