2012-05-27 6 views
42

this post पढ़ने से मुझे पता चला है कि 'अमान्य' और 'अमान्य' इनपुट मानों के लिए कुछ छद्म वर्ग हैं।क्या मैं जावास्क्रिप्ट से अमान्य फ़ील्ड को चिह्नित कर सकता हूं?

क्या कोई तरीका है कि मैं एक इनपुट फ़ील्ड को जावास्क्रिप्ट से अमान्य/मान्य के रूप में चिह्नित कर सकता हूं? या वैकल्पिक रूप से, क्या मैं उपयोग की गई सत्यापन विधि को ओवरराइड कर सकता हूं?

+0

आप हमेशा "अमान्य" वर्ग के साथ डबल-अप कर सकते हैं, लेकिन यह सीखना वाकई दिलचस्प होगा कि एक बेहतर तरीका है। – Pointy

+0

हाँ, ज़ाहिर है, लेकिन यह उबाऊ होगा;) – Svish

उत्तर

-10

वहाँ एक रास्ता मैं के रूप में अमान्य एक इनपुट फ़ील्ड/ जावास्क्रिप्ट से मान्य चिह्नित कर सकते हैं है?

दुर्भाग्य से, आप जावास्क्रिप्ट में शैली छद्म कक्षाएं, क्योंकि वे वास्तविक तत्व नहीं कर रहे हैं, वे वास्तविक डोम में मौजूद नहीं है नहीं कर सकते।

वेनिला जावास्क्रिप्ट के साथ आप validation API का उपयोग करेंगे।

jQuery में आप बस यह कर सकते हैं, http://jsfiddle.net/elclanrs/Kak6S/

if ($input.is(':invalid')) { ... } 

या वैकल्पिक रूप से, मैं प्रयोग किया जाता सत्यापन विधि ओवरराइड कर सकते हैं?

यदि आप HTML5 सत्यापन का उपयोग कर रहे हैं, तो मार्कअप पर चिपके रहें। अन्यथा, आप $form.attr('novalidate', 'novalidate') के साथ HTML5 सत्यापन को अक्षम कर सकते हैं और अपने फ़ील्ड को सत्यापित करने के लिए जेएस का उपयोग कर सकते हैं, और उसके बाद valid या invalid कक्षाओं को आवश्यकतानुसार जोड़ सकते हैं। मैंने a plugin बनाया जो गैर HTML5 ब्राउज़र का समर्थन करने के लिए इस तरह काम करता है।

+0

आपका क्या मतलब है कि आप उन्हें स्टाइल नहीं कर सकते? मैं पहले से ही कर रहा हूँ। 'इनपुट: अमान्य + लेबल :: {सामग्री:" INVALID "के बाद; रंग: लाल;} 'फ़ील्ड अमान्य होने पर लेबल के बाद इनपुट लेबल के आगे INVALID पाठ का लाल टुकड़ा जोड़ता है (उदाहरण के लिए यदि एक ईमेल फ़ील्ड में एक अमान्य ईमेल है) – Svish

+0

हाँ सीएसएस में हाँ, लेकिन जेएस – elclanrs

+9

में नहीं "क्या कोई तरीका है कि मैं एक इनपुट फ़ील्ड को जावास्क्रिप्ट से अमान्य/मान्य के रूप में चिह्नित कर सकता हूं?" "दुर्भाग्य से, आप जावास्क्रिप्ट से छद्म वर्गों को स्टाइल नहीं कर सकते हैं" यही सवाल नहीं पूछा गया है। – mikemaccana

2

संपादित करें: किसी ने स्पष्ट किया है कि आप डोम के लिए "वैध" "अमान्य" विशेषताओं की तलाश में हैं।

मैं dom_object.setAttribute("isvalid", "true") का उपयोग करके प्रत्येक टैग में विशेषताओं को जोड़ूंगा। आपके पास एक केंद्रीय सत्यापन फ़ंक्शन भी हो सकता है जो प्रत्येक बार इन विशेषताओं को अपडेट करता है (और प्रत्येक बार dom_object.getAttribute("isvalid") का उपयोग करें)।

जब भी कोई तत्व फोकस खो देता है, या जब चाहें आप इस समारोह को चला सकते हैं।

बिल्कुल सुरुचिपूर्ण नहीं है, लेकिन दुर्भाग्यवश जावास्क्रिप्ट और HTML5 के साथ अब "छद्म" समर्थन नहीं है।


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

उदाहरण के लिए, मैं स्रोत कोड का निरीक्षण करके आसानी से तत्व आईडी पा सकता हूं, फिर अधिकतम मान बदलने के लिए 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 द्वारा प्रतिस्थापित किया जाएगा। आप अन्य चीजें भी कर सकते हैं; जैसे त्रुटि को चेतावनी दें तो झूठी वापसी करें। तुम भी,

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

+5

आप पूरी तरह से सही हैं, लेकिन मुझे नहीं लगता कि आप पूरी तरह से सवाल समझ गए हैं। एचटीएमएल 5 में, HTML मार्कअप में विशेषता मान जोड़ने के कई तरीके हैं जो अंतर्निहित सत्यापन नियमों को इंगित करते हैं। जब कोई ब्राउज़र उन नियमों को लागू करता है, तो एक इनपुट फ़ील्ड सीएसएस में "मान्य" या "अमान्य" छद्म-वर्ग से मेल खाती है। इस प्रकार, आप उन विशेषताओं के साथ HTML लिख सकते हैं, और सीएसएस "मान्य" और "अवैध" चयनकर्ताओं के साथ चयनकर्ताओं के साथ, और किसी भी जावास्क्रिप्ट के बिना दृश्य प्रतिक्रिया दे सकते हैं। सवाल यह है कि मूल रूप से "मान्य" स्थिति डोम विशेषता के रूप में उपलब्ध है या नहीं। – Pointy

+0

हाँ धन्यवाद, यह और अधिक समझ में आता है। – Raekye

+1

हाँ, @ पॉइंट सही है। बाकी के बारे में पहले ही जानते हैं;) – Svish

62

आप इस उद्देश्य के लिए कस्टम वैलिटीिटी फ़ंक्शन का उपयोग कर सकते हैं।

यदि आप फ़ील्ड में कस्टम वैलिटी संदेश जोड़ते हैं, तो यह अमान्य हो जाता है। जब आप संदेश को खाली स्ट्रिंग के रूप में सेट करते हैं, तो यह फिर से वैध हो जाता है (जब तक कि अन्य कारणों से यह अमान्य न हो)।

field.setCustomValidity("Invalid field."); फ़ील्ड को अमान्य बना देगा।

field.setCustomValidity(""); फ़ील्ड को तब तक मान्य कर देगा जब तक यह HTML5 बाधा न हो।

+3

बिल्कुल मुझे जो चाहिए, धन्यवाद! – Andreas

+0

बहुत बढ़िया। धन्यवाद। Http://codepen.io/kevinSuttle/post/the-current-state-of-web-forms में जोड़ा गया –

संबंधित मुद्दे

 संबंधित मुद्दे