यूआई

Question

अपडेट करने के लिए चेक वैलिटीटी जब हम एचटीएमएल 5 फॉर्म जमा करने का प्रयास करते हैं, तो यह एक से अधिक आवश्यक फ़ील्ड में मूल्य या कुछ अन्य त्रुटि आई है (टाइप या लम्बाई मिस्चैच)। UI को हाइलाइट किए गए अमान्य फ़ील्ड के साथ अद्यतन किया गया है और पहला अमान्य फ़ील्ड केंद्रित है। इसके अलावा, एक त्रुटि संदेश के साथ पहले अमान्य फ़ील्ड से जुड़ा एक गुब्बारा/बबल है।

अब, अगर यह एक अजाक्स रूप है, तो हम अजाक्स कॉल भेजने से पहले त्रुटियों की पुष्टि करने के लिए myForm.checkValidity() को कॉल करते हैं। लेकिन चेकवैलिटी() को कॉल करने पर, यह यूआई को अमान्य फ़ील्ड के साथ यूआई को प्रभावित नहीं करता है और बबल संलग्न होता है।

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

Answer 1

बस एक वास्तविक फॉर्म सबमिशन ट्रिगर करें - http://jsfiddle.net/tj_vantoll/ZN29S/।

एक वास्तविक रूप प्रस्तुत checkValidity चलेंगे, बुलबुला त्रुटियों दिखाने के लिए, invalid ईवेंट हैंडलर्स फोन के रूप में आवश्यक, आदि

यह सुनिश्चित करने के रूप वास्तव में आप बस के लिए एक submit ईवेंट हैंडलर साथ जोड़ने की आवश्यकता प्रस्तुत नहीं करता है <form> जो डिफ़ॉल्ट कार्रवाई को रोकता है, फिर AJAX कॉल करें।

यह काम करता है क्योंकि submit ईवेंट तब तक नहीं निकाल दिया जाएगा जब तक कोई फॉर्म अपनी सभी बाधाओं को पूरा नहीं कर लेता है (यानी वैध डेटा है)। इसलिए checkValidity पर एक स्पष्ट कॉल आवश्यक नहीं है।

टिप्पणियों को संबोधित करने के लिए संपादित करें (11/7/12)।

वास्तविक फॉर्म सबमिशन इस मामले में मैं बस सबमिट बटन के साथ किए गए गैर-AJAX सबमिशन का जिक्र कर रहा था। देशी बबल को प्रदर्शित करने के लिए और उपयुक्त फॉर्म तत्व में बदलने के लिए ध्यान केंद्रित करने के लिए यह इसे पूरा करने का एकमात्र तरीका है। यदि कोई सबमिट बटन मौजूद नहीं है तो आप एक छुपा बना सकते हैं और सबमिशन ट्रिगर करने के लिए इसका उपयोग कर सकते हैं; it will still work।

मैं मानता हूं कि यह दृष्टिकोण आदर्श से कम है लेकिन यह all supporting browsers में काम करता है। form.submit() पर कॉल करने के बजाए इस हैक का उपयोग करने का एकमात्र कारण यह है कि form.submit() मूल सत्यापन को ट्रिगर नहीं करता है। मेरे लिए यहां मुद्दा यह नहीं है कि सत्यापन को ट्रिगर करने के लिए कोई एपीआई नहीं है, बल्कि form.submit() पर कॉल करना नहीं है। Spec का कहना है कि constraint validation चलाया जाना चाहिए जब भी "उपयोगकर्ता एजेंट को फॉर्म तत्व फ़ॉर्म" की बाधाओं को स्थिर रूप से मान्य करने की आवश्यकता है। मुझे नहीं पता कि form.submit() क्यों कॉल नहीं करेगा।

यह ध्यान दिया जाना चाहिए कि checkValidity एक ही प्रपत्र सबमिट करने के रूप में algorithm के माध्यम से चलाया जाता है। इसलिए आप turn off the default bubbles पर निःशुल्क हैं और अपना खुद का कार्यान्वयन कर रहे हैं। उदाहरण के लिए this जैसे कुछ।