इस पोस्ट को पढ़ने से मैंने पाया है कि HTML5 के लिए 'वैध' और 'अमान्य' इनपुट मानों के लिए कुछ छद्म कक्षाएं हैं।
क्या कोई तरीका है जो मैं जावास्क्रिप्ट से एक इनपुट फ़ील्ड को अवैध / वैध के रूप में चिह्नित कर सकता हूं? या वैकल्पिक रूप से, क्या मैं उपयोग की गई सत्यापन विधि को ओवरराइड कर सकता हूं?
जवाबों:
आप इस उद्देश्य के लिए customValidity फ़ंक्शन का उपयोग कर सकते हैं।
यदि आप फ़ील्ड में कस्टमवैलिडिटी संदेश जोड़ते हैं, तो यह अमान्य हो जाता है। जब आप संदेश को एक रिक्त स्ट्रिंग के रूप में सेट करते हैं, तो यह फिर से मान्य हो जाता है (जब तक कि यह अन्य कारणों से अमान्य न हो)।
field.setCustomValidity("Invalid field."); फ़ील्ड को अमान्य बना देगा।
field.setCustomValidity(""); जब तक यह एक HTML5 बाधा विफल नहीं हो जाता तब तक क्षेत्र को वैध बना दिया जाएगा।
inputया blurआप सही समय के बाद field.reportValidity () का उपयोग कर सकते हैं ।
संपादित करें : किसी ने स्पष्ट किया कि आप DOM के लिए "वैध" "अमान्य" विशेषताओं की तलाश कर रहे हैं।
मैं प्रत्येक टैग का उपयोग करके विशेषताओं को जोड़ूंगा dom_object.setAttribute("isvalid", "true")। आपके पास एक केंद्रीय सत्यापन फ़ंक्शन भी हो सकता है जो हर बार इन विशेषताओं को अपडेट करता है (और dom_object.getAttribute("isvalid")हर बार उपयोग करें )।
जब भी कोई तत्व फ़ोकस खोता है, या जब भी आप चाहें, तो आप यह फ़ंक्शन चला सकते हैं।
बिल्कुल सुरुचिपूर्ण नहीं, लेकिन दुर्भाग्य से अब जावास्क्रिप्ट और एचटीएमएल 5 के साथ कोई "छद्म" समर्थन नहीं है।
यदि मैं आपके प्रश्न को समझता हूं, तो आप जावास्क्रिप्ट के साथ सत्यापन कर सकते हैं। हालांकि, चेतावनी दी जाती है कि क्लाइंट साइड सत्यापन, विशेष रूप से जावास्क्रिप्ट सत्यापन को दरकिनार करना बहुत आसान है । आपको कभी भी क्लाइंट डेटा पर भरोसा नहीं करना चाहिए और हमेशा सर्वर साइड पर चेकिंग करनी चाहिए।
उदाहरण के लिए, मैं आसानी से स्रोत कोड का निरीक्षण करके तत्व आईडी पा सकता हूं, फिर document.getElementById('some_id').setAttribute('max', new_number)अधिकतम मूल्य बदलने के लिए करते हैं (यह आपके लिंक से प्रविष्टियों में से एक था)।
इसे करने के विभिन्न तरीके हैं, इसलिए मैं आपको सामान्य मुहावरा देने की कोशिश करूँगा।
आप कर के मूल्य को पकड़ सकते हैं document.getElementById('form_element_id').value(सुनिश्चित करें कि आप उस प्रपत्र को देते हैं nameजो सर्वर को भेजा जाता है, और idजिसे जावास्क्रिप्ट द्वारा उपयोग किया जाता है)। Textareas के लिए, आप उपयोग कर सकते हैं .innerHTML।
फिर आपके पास एक चर में मूल्य है, इसे जांचने के विभिन्न तरीके हैं।
उदाहरण के लिए, आप कर सकते हैं if (parseInt(my_value) < 0) //error। आप नियमित अभिव्यक्ति का उपयोग भी कर सकते हैं, मैं यह सब नहीं समझाऊंगा, लेकिन आप यहां से शुरू कर सकते हैं http://www.w3schools.com/jsref/jsref_obj_regexp.asp । मुझे पता है कि w3schools सबसे अच्छा स्रोत नहीं है, लेकिन मुझे इसे शुरू करने के लिए एक ठीक जगह मिल गई है।
अब सत्यापन भाग के लिए: onsubmit="return validateForm()अपने फॉर्म टैग में जोड़ें जहाँ validateForm () फ़ंक्शन है जो सभी जाँच करता है। और फ़ंक्शन केवल trueतभी लौटाता है जब मान्य और falseअन्यथा। यह डिफ़ॉल्ट सत्यापन फ़ंक्शन को ओवरराइड करता है (जो डिफ़ॉल्ट रूप से कुछ भी नहीं करता है)।
तो उपरोक्त उदाहरण में, //errorद्वारा प्रतिस्थापित किया जाएगा return false। आप अन्य काम भी कर सकते हैं; इस तरह की त्रुटि को सचेत करें और फिर गलत वापस करें। आप अमान्य फ़ील्ड्स को हाइलाइट करने के लिए जावास्क्रिप्ट का उपयोग भी कर सकते हैं (यदि यह आपके द्वारा " जावास्क्रिप्ट से अमान्य / अमान्य के रूप में एक इनपुट फ़ील्ड को चिह्नित करें " का अर्थ है तो निश्चित नहीं )
बेशक, यदि आप उन सभी क्षेत्रों की जांच नहीं करना चाहते हैं, जिन्हें आपको निश्चित रूप से पास होने पर ही वापस लौटना होगा। फिर, आपको इस पर भरोसा नहीं करना चाहिए, लेकिन यदि आप केवल औसत लोगों को रोकते हैं तो यह एक आसान समाधान है।
क्या कोई तरीका है जो मैं जावास्क्रिप्ट से एक इनपुट फ़ील्ड को अवैध / वैध के रूप में चिह्नित कर सकता हूं?
दुर्भाग्य से, आप जावास्क्रिप्ट में छद्म कक्षाओं को स्टाइल नहीं कर सकते, क्योंकि वे वास्तविक तत्व नहीं हैं, वे वास्तविक डोम में मौजूद नहीं हैं।
वेनिला जावास्क्रिप्ट के साथ आप सत्यापन एपीआई का उपयोग करेंगे ।
JQuery में आप बस ऐसा कर सकते हैं, http://jsfiddle.net/elclanrs/Kak6S/
if ( $input.is(':invalid') ) { ... }
या वैकल्पिक रूप से, क्या मैं उपयोग की गई सत्यापन विधि को ओवरराइड कर सकता हूं?
यदि आप HTML5 सत्यापन का उपयोग कर रहे हैं, तो मार्कअप से चिपके रहें। अन्यथा, आप HTML5 सत्यापन को अक्षम कर सकते हैं $form.attr('novalidate', 'novalidate')और अपने क्षेत्रों को मान्य करने के लिए JS का उपयोग कर सकते हैं , और फिर जहाँ आवश्यकता हो वहां जोड़ सकते हैं validया invalidकक्षाएं लगा सकते हैं। मैंने एक प्लगइन बनाया जो गैर एचटीएमएल 5 ब्राउज़रों का समर्थन करने के लिए इस तरह काम करता है।
input:invalid + label::after{content: " INVALID";color: red;}लेबल के बाद INVALID टेक्स्ट का एक लाल टुकड़ा जोड़ता है जो मेरे पास इनपुट फ़ील्ड के बगल में है यदि फ़ील्ड अमान्य है (उदाहरण के लिए यदि किसी ईमेल फ़ील्ड में एक अमान्य ईमेल है)