Angular.js: बग: फ़ायरफ़ॉक्स: 'आवश्यक' वाले इनपुट फ़ील्ड सबमिट करने से पहले लाल छाया/सीमा प्राप्त करें

मैं वास्तव में नहीं देखता कि कोणीय के साथ लेकिन फ़ायरफ़ॉक्स के साथ एक समस्या है
http://stackoverflow.com/questions/3809146/firefox-4-required-input-form-red-border-outline

@timjacobi : आपका लिंक लाल छाया को अक्षम करने के लिए लागू होता है _entirely_ (यानी फॉर्म जमा करने के बाद भी)। मुझे मिली एकमात्र (क्रमबद्ध) प्रासंगिक चर्चा यहां है: http://stackoverflow.com/questions/17209057/firefox-draws-red-border-on-required-select-box/30812303

मेरा सुझाव: जैसे ही उपयोगकर्ता फॉर्म जमा करता है, कक्षा ng-submitted (या समान) लागू करें।

कारण: कहीं और ध्यान केंद्रित किए बिना सबमिट बटन पर क्लिक करते समय, एनजी-कक्षाएं बिल्कुल नहीं बदलती हैं। इसलिए, स्थिति "फॉर्म अभी प्रस्तुत किया गया था" और स्थिति "उपयोगकर्ता ने पहले ही सबमिट करने का प्रयास किया है" को सीएसएस में अलग नहीं किया जा सकता है - यही कारण है कि इस तरह के सभी कामकाज वास्तव में काम नहीं करते हैं:
.ng-untouched.ng-invalid-required { box-shadow:none; }

(मैं उस स्थिति के बारे में बात कर रहा हूं जहां novalidate _not_ सेट है; यानी ब्राउज़र की आंतरिक सत्यापन को बनाए रखना।)

आपको मूल ब्राउज़र सत्यापन को अक्षम करना होगा। उदा. <form novalidate>

चलो, यह किस तरह का जवाब है?
मैं सभी उपयोगकर्ताओं को फ़ायरफ़ॉक्स का उपयोग न करने के लिए भी कह सकता था ......

अब, गंभीरता से, क्या AngularJS के लिए मूल ब्राउज़र सत्यापन को अक्षम करना आधिकारिक _system आवश्यकता_ है? मुझे लगा कि यह सिर्फ एक सिफारिश थी?

मेरी राय में मूल ब्राउज़र सत्यापन को बनाए रखने के वैध कारण हैं - उदाहरण के लिए त्रुटि संदेशों को डिजाइन/स्टाइल करने से परेशान नहीं होना। AngularJS को _reduce_ प्रोग्रामर के काम के लिए बढ़ावा दिया जाता है, इसे _increase_ करने के लिए नहीं (होमपेज से: "कम कोड लिखें, जल्दी ही बीयर पीएं।")। इसलिए यदि आप इसे ठीक नहीं करने जा रहे हैं, तो यह निश्चित रूप से "अधिक कोड लिखें" का मामला है...

तो कृपया इसे फिर से खोलें।

@ThomasLandauer मैं आपको यह बताने की कोशिश नहीं कर रहा हूं कि क्या करना है और क्या नहीं करना है। यदि आप फ़ायरफ़ॉक्स में एक इनपुट फ़ील्ड पर require डालते हैं तो वही लाल सीमा मौजूद होती है, यह एक कोणीय ऐप नहीं है। सवाल यह होगा कि यह एंगुलर के साथ एक मुद्दा क्यों है और यहां खोला गया है? आपके उदाहरण में कोणीय विशिष्ट क्या है?

मुझे इसे खोलने दें और यह देखने की कोशिश करें कि क्या इस फ़ायरफ़ॉक्स सीमा के आसपास काम करना संभव है

जैसा कि ऊपर बताया गया है: लाल सीमा केवल तभी होती है जब सभी _three_ शर्तें पूरी होती हैं (यानी AngularJS सक्रिय है): बेला देखें, ng-model निकालें और पुनः लोड करें (F5 कभी-कभी काम नहीं करता है, Ctrl+F5 की आवश्यकता होती है) => लाल सीमा चली गई है! तो यह _is_ एक कोणीय मुद्दा है।

@ThomasLandauer यह फ़ायरफ़ॉक्स के साथ एक समस्या है, फ़ायरफ़ॉक्स कोड जावास्क्रिप्ट का उपयोग करके तत्व मान सेट करते समय फॉर्म सत्यापन को ट्रिगर करता है और मान वर्तमान मान के समान होता है। इस मामले को संभालने के लिए #12106 बनाया गया, लेकिन फिक्स केवल jqLite के लिए काम करेगा (jQuery के लिए एक अलग वर्कअराउंड की आवश्यकता होगी)।

तथ्य यह है कि इस व्यवहार को ट्रिगर करने के लिए आपको कोणीय की आवश्यकता है, इसका मतलब यह नहीं है कि यह एक कोणीय मुद्दा है क्योंकि कोणीय के बिना समान व्यवहार को ट्रिगर करना संभव है।

अभी भी संदेह में? किसी भी कोणीय का उपयोग नहीं कर अद्यतन पहेली।
https://jsfiddle.net/5yh58orm/14/

https://jsfiddle.net/5yh58orm/17/ उस उदाहरण के बराबर है जिसे @timjacobi ने पोस्ट किया था, लेकिन स्पष्ट रूप से दिखाता है कि यह एक फ़ायरफ़ॉक्स समस्या है

मेरा सुझाव: जैसे ही उपयोगकर्ता फॉर्म जमा करता है, एनजी-सबमिट (या समान) वर्ग लागू करें।

एफडब्ल्यूआईडब्ल्यू, वहां _IS_ एक ng-submitted वर्ग है और इसे सबमिट करने के बाद फॉर्म पर लागू किया जाता है, ताकि आप इसे अपने इनपुट को स्टाइल करने के लिए उपयोग कर सकें।

@lgalfaso : मैं इसे फ़ायरफ़ॉक्स समस्या नहीं कहूंगा, बल्कि फ़ायरफ़ॉक्स और अनुलगर के बीच एक _incompability_ ;-) लेकिन वैसे भी, दूसरे मुद्दे को खोलने के लिए धन्यवाद !! :-)

@gkalpak : हाँ, धन्यवाद, मैंने देखा कि इस बीच ;-) लेकिन: ng-submitted केवल फॉर्म _actually_ सबमिट किए जाने के बाद ही लागू होता है (यानी उस समय में जहां कोई सत्यापन और हाइलाइटिंग स्पष्ट रूप से अप्रचलित है)। मैं उस क्षण के बारे में बात कर रहा हूं जब उपयोगकर्ता ने असफल रूप से _try_ सबमिट करने का प्रयास किया। यह अच्छा नहीं होगा अगर कोणीय एक वर्ग निर्धारित कर सकता है - एक बेहतर वर्ग का नाम शायद ng-unsuccessful-submit ।

@ThomasLandauer , मैं देखता हूं कि असफल सबमिट करने का संकेत देने के लिए कक्षा जोड़ने के बारे में आपका क्या मतलब है।

लेकिन मुझे नहीं लगता कि यह व्यापक रूप से इस्तेमाल/आवश्यक विकल्प है। ध्यान दें कि कई लोगों ने विभिन्न वर्गों को ngModelController / formController से जोड़ने का अनुरोध किया है ताकि सभी प्रकार की घटनाओं (जैसे फोकस) को इंगित किया जा सके।
कोणीय ने कुछ ऐसे लागू किए हैं जिन्हें आमतौर पर उपयोगी माना जाता है (जैसे ng-dirty / ng-pristine , ng-touched / ng-untouched , ng-submitted ), लेकिन यह सभी उपयोगकेस को कवर करने की कोशिश कर रहे बहुत से वर्गों को जोड़ने का कोई मतलब नहीं है।

उस ने कहा, कोर के बाहर किसी भी अतिरिक्त कार्यक्षमता को लागू करना बहुत आसान है।

हाँ निश्चित रूप से, आप निश्चित रूप से _everything_ ;-) के लिए कक्षा नहीं जोड़ सकते हैं

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

खैर, मामला वैसे भी फाइल पर है, इसलिए अगर किसी को भी यह चाहिए, तो कृपया एक टिप्पणी छोड़ दें। और अगर मैं अकेला हूं, तो इसके बारे में भूल जाओ ;-)

इस पर काम करने के लिए धन्यवाद! यह अब टेक्स्ट क्षेत्र को छोड़कर सभी इनपुट फ़ील्ड के लिए काम करता है। क्या आप इसे भी ठीक कर सकते हैं?

[संपादित करें] मैंने इस सीएसएस शैली को अपने सभी टेक्स्ट क्षेत्र क्षेत्रों में परिभाषित करके अस्थायी रूप से तय किया है:
बॉक्स- छाया: कोई नहीं

@eyahlin , चूंकि यह मुद्दा बंद है, कृपया एक नया खोलें (यदि संबंधित हो तो इसे संदर्भित करें)। साथ ही समस्या का लाइव डेमो प्रदान करने से बहुत मदद मिलती है: स्माइली:

धन्यवाद!

मैंने फ़ायरफ़ॉक्स बग रिपोर्ट सबमिट की है क्योंकि मैंने इसे कोणीय के बाहर अनुभव किया है:
https://bugzilla.mozilla.org/show_bug.cgi?id=1399046

कोणीय 2 में प्राइमेंग के साथ एक ही बात। मजबूत प्राइमेंग कक्षाओं को ओवरराइट करने के लिए बिंदु को एक या यदि आवश्यक हो तो दो, तीन वर्गों में रखा जाता है। उनके बाद दो सेल्फ क्लास लगाएं, कुछ प्राइमेंग क्लास लगाएं
.overwriteclass .overwriteclass2 .ng-valid[required], .ng-valid.required {
सीमा: 1px ठोस #e1ea06 !महत्वपूर्ण;
बॉक्स-छाया: 0 0 3px #e1ea06!;
}

पुष्टि की यह कोणीय के बाहर है, मैं इसे प्रतिक्रिया और सामग्री-यूआई (फॉर्मी के माध्यम से) के साथ रख रहा हूं।

किसी और के लिए इसे रोकने की कोशिश करने के लिए, आप डिफ़ॉल्ट फ़ायरफ़ॉक्स ब्राउज़र स्टाइल को ओवरराइड कर सकते हैं:

:-moz-ui- अमान्य: नहीं (आउटपुट) {
बॉक्स-छाया: कोई नहीं;
}

(जाहिर है कि आउटपुट तत्व पर नहीं वैकल्पिक है)।

<form novalidate ...> ... </form> include novalidate otherwise you have to manually reset form. Such as using jquey $('.your-form-class').trigger("reset");