HTML5 विनिर्देश हमें कई नए प्रकार के फ़ील्ड, विशेषताएँ और रूपों के लिए अन्य उपयोगी कार्य प्रदान करता है। सबसे दिलचस्प विशेषताओं में से एक फॉर्म का ब्राउज़र सत्यापन है।
दुर्भाग्य से, सभी ब्राउज़र इन सुविधाओं का समर्थन नहीं करते हैं, और इसलिए हमने फ़ायरफ़ॉक्स 4 में इन सुविधाओं का उपयोग करने पर ध्यान केंद्रित करने की कोशिश की।
ब्राउज़र फॉर्म का सत्यापन क्यों?
एचटीएमएल 5 में फॉर्म सत्यापन के पीछे का विचार खेतों की सामग्री की जांच करते समय जावास्क्रिप्ट से बाहर निकलना है: क्या यह ईमेल पता वैध है? क्या यह मैदान भरा है? क्या पासवर्ड मेल खाते हैं? पहले, ज्यादातर मामलों में, जावास्क्रिप्ट का उपयोग इन उद्देश्यों के लिए किया गया था। आप अपना स्वयं का जावास्क्रिप्ट कोड लिख सकते हैं या जावास्क्रिप्ट पुस्तकालय का उपयोग कर सकते हैं, लेकिन यह हमेशा एक दोहराव, उबाऊ और त्रुटि प्रवण कार्य होगा। ब्राउज़र-परीक्षण किए गए रूपों के साथ, आपको अब इन कार्यों का ध्यान नहीं रखना है, बस सादे HTML लिखना है।
उपयोगकर्ता के लिए, ब्राउज़र द्वारा किया गया सत्यापन सबसे अच्छी पहुंच और स्थिरता के साथ गुणवत्ता की गारंटी है।
मैं इस फ़ंक्शन का उपयोग करके अपना फ़ॉर्म कैसे बना सकता हूं?
यदि आप आंतरिक सत्यापन के साथ प्रपत्र सत्यापन या नए इनपुट से संबंधित नई विशेषताओं का उपयोग करते हैं, तो ब्राउज़र स्वचालित रूप से दर्ज किए गए डेटा की वैधता की जांच करेगा (यदि, निश्चित रूप से, वे ब्राउज़र द्वारा समर्थित हैं)। HTML5 द्वारा शुरू किए गए सभी नए इनपुट प्रकार, खोज और टेली को छोड़कर, आंतरिक सत्यापन का उपयोग करते हैं।
फ़ायरफ़ॉक्स 4 भी ईमेल और यूआरएल का समर्थन करने वाला है, और फॉर्म को मान्य करते समय, ब्राउज़र यह जांच करेगा कि क्या फ़ील्ड में दर्ज किया गया मूल्य क्रमशः एक मान्य ईमेल पता या यूआरएल है।
इसके अलावा, निम्नलिखित विशेषताएँ एक स्वचालित क्षेत्र सत्यापन तंत्र प्रदान करेंगी:
* आवश्यक: चेक किया गया फ़ील्ड सत्यापन को पास नहीं करेगा यदि उसका मूल्य खाली है। यह <input> और <textarea> टैग पर लागू होता है। यदि आप इसे <input type = 'checkbox'> के लिए सेट करते हैं, तो सफल सत्यापन के लिए तत्व की जाँच (जाँच) होनी चाहिए। <इनपुट प्रकार = 'रेडियो'> के लिए इसका उपयोग करते समय, रेडियो बटन में से एक को जांचना चाहिए। यदि <input type = 'file'> पर सेट किया जाता है, तो फ़ाइल को चुनना होगा।
< input required >
< textarea required ></ textarea >
* पैटर्न: आप एक तत्व के मूल्य की जांच करने के लिए एक नियमित अभिव्यक्ति को भी परिभाषित कर सकते हैं। यह विशेषता केवल कुछ <इनपुट> (पाठ, खोज, टेली, ईमेल और यूआरएल) के लिए उपयोग की जा सकती है। यदि आप पैटर्न का उपयोग करते हैं, तो यह अत्यधिक अनुशंसा की जाती है कि आप पैटर्न का वर्णन करने के लिए शीर्षक विशेषता का उपयोग करें।
< input type ='tel' pattern ='\d\d \d\d \d\d \d\d \d\d' title =" 'XX XX XX XX XX'" >
< input type ='email' pattern =".*@company\.com" title =" email " >
* maxlength: maxlength पहले से ही ब्राउजरों के वर्जन में इस्तेमाल की जा सकती है, लेकिन यह केवल <input> टैग के लिए कीबोर्ड इनपुट को ब्लॉक करता है, ताकि यूजर्स ज्यादा से ज्यादा कैरेक्टर्स एंटर न कर सकें। फ़ायरफ़ॉक्स 4 में - इस विशेषता का उपयोग <textarea> के लिए भी किया जा सकता है। इसके अलावा, यदि मूल्य मान विशेषता के माध्यम से सेट किया जाता है, तो तत्व अमान्य हो जाएगा, अगर नए मूल्य की लंबाई अधिकतम से अधिक है।
< input maxlength ='10' >
< textarea maxlength ='140' ></ textarea >
मैं सत्यापन को कैसे मना कर सकता हूं?
यदि आपके पास फ़ॉर्म को मान्य करने के लिए अपना स्वयं का सिस्टम है, तो आपको संभवतः इसे अक्षम करना चाहिए जब ब्राउज़र फ़ॉर्म के सत्यापन का प्रबंधन कर सकता है। हालाँकि, आपके पास कुछ कारण हो सकते हैं कि आप ब्राउज़र द्वारा फ़ॉर्म सत्यापन को अक्षम क्यों करना चाहते हैं। इसके अच्छे कारण यह हो सकते हैं कि यदि आप कुछ नए प्रकार के इनपुट का उपयोग करना चाहते हैं, लेकिन आप उनकी सामग्री की वैधता की जाँच नहीं करना चाहते हैं।
ऑप्ट आउट करने का सबसे आसान तरीका है <फॉर्म> टैग के लिए
नोवेलिड विशेषता जोड़ना। आप अपने सबमिट बटन के लिए
फॉर्मनोवालिडेट भी सेट कर सकते हैं। यदि आप फॉर्म को मान्य करने के लिए एक बटन सबमिट करना चाहते हैं और बिना किसी अन्य को सबमिट करने के लिए आपको novalidate पर formnovalidate को वरीयता देनी चाहिए।
मैं अपने सत्यापन नियमों को कैसे परिभाषित कर सकता हूं?
आप
.setCustomValidity (errorMsg) को कॉल करके एक तत्व को अमान्य बना सकते हैं। यह फ़ंक्शन एक त्रुटि संदेश को एक पैरामीटर के रूप में स्वीकार करता है। यदि आप कोई कस्टम त्रुटि निकालना चाहते हैं तो आप एक रिक्त स्ट्रिंग .setCustomValidity ('') पास कर सकते हैं।
इस पद्धति का उपयोग करके, आप जांच सकते हैं, उदाहरण के लिए, यदि पासवर्ड दो क्षेत्रों में मेल खाता है:
<script>
function checkPassword(p1, p2)
{
if (p1.value != p2.value) {
p2.setCustomValidity( ' ' );
} else {
p2.setCustomValidity( '' );
}
}
</script>
<input type= 'password' id= 'p1' >
<input type= 'password' onfocus= "checkPassword(document.getElementById('p1'), this);" oninput= "checkPassword(document.getElementById('p1'), this);" >
मैं त्रुटि संदेश का पाठ कैसे बदल सकता हूं?
प्रत्येक प्रकार की त्रुटि में एक पंक्ति हो सकती है जो त्रुटि का वर्णन करती है। उदाहरण के लिए, यदि <इनपुट> की आवश्यकता है और इससे कोई फर्क नहीं पड़ता है, तो संदेश होगा, "कृपया इस फ़ील्ड को भरें।" इसी त्रुटि संदेश को प्रदर्शित करने के लिए फ़ायरफ़ॉक्स जितना संभव हो उतना स्मार्ट होने की कोशिश करता है, लेकिन आप इसे कुछ स्थितियों में ओवरराइड करना चाह सकते हैं जहां नियम बहुत जटिल हैं। उदाहरण के लिए:
<input type= 'email' required pattern= '.*@company\.com' >
आप एक साधारण संदेश पसंद कर सकते हैं, "कृपया अपना कॉर्पोरेट ईमेल पता दर्ज करें।" तीन सार्वभौमिक संदेशों के बजाय, अधूरा प्रतिबंध पर निर्भर करता है।
इसकी सहायता के लिए, आप गैर-मानक विशेषता
x-moz-irormessage का उपयोग कर सकते हैं, जो आपको इस प्रपत्र फ़ील्ड के लिए त्रुटि संदेश को परिभाषित करने की अनुमति देता है। त्रुटि के बावजूद, यदि
x-moz-irormessage मौजूद है और खाली स्ट्रिंग से अलग है, तो यह मान डिफ़ॉल्ट मान के बजाय त्रुटि संदेश के रूप में उपयोग किया जाएगा।
यह विशेषता गैर-मानक है, इसलिए इसका उपयोग सावधानी से किया जाना चाहिए। इसके अलावा, आपको पता होना चाहिए कि .setCustomValidity () आपको अप्रत्यक्ष रूप से अपनी त्रुटि संदेश सेट करने की अनुमति देता है।
मैं दिखाई देने वाली त्रुटि के UI को कैसे बदल सकता हूं?
दुर्भाग्य से, UI को बदलने का कोई तरीका नहीं है। संदेश ब्राउज़र का हिस्सा है, और फिलहाल सामग्री से ब्राउज़र शैलियों को बदलना संभव नहीं है। यह भविष्य में बदल सकता है, लेकिन यह फ़ायरफ़ॉक्स 4 के लिए नहीं होगा।
यदि आपको लगता है कि दिखाई देने वाला संदेश बदसूरत है, तो आपको ध्यान रखना चाहिए कि यह अंतिम संस्करण नहीं है। डेवलपर्स इसे बाद में सुधारने की कोशिश करेंगे,
बग 602500 देखें । किसी भी टिप्पणी का स्वागत है!
नई सीएसएस छद्म कक्षाएं और डिफ़ॉल्ट शैली
CSS3 UI नए छद्म वर्गों का परिचय देता है जो HTML5 अब उपयोग करता है, जैसे
: अमान्य: मान्य: आवश्यक और: वैकल्पिक । फ़ायरफ़ॉक्स 4 इन सभी छद्म वर्गों का समर्थन करता है और एक नया छद्म-वर्ग जोड़ता है
:: -मोज़-सबमिट-अमान्य , जिसका उपयोग सबमिट बटन के लिए किया जाता है जब एक
अमान्य तत्व होता है।
U: अमान्य में एक डिफ़ॉल्ट शैली है - यह एक लाल बॉक्स-छाया है। जब -moz-ui-अमान्य जोड़ा जाता है तो यह डिफ़ॉल्ट शैली हटा दी जाएगी। आप अपनी शैली पत्रक में इस डिफ़ॉल्ट शैली को आसानी से हटा सकते हैं:
:invalid {
box-shadow: none;
}
प्रपत्र सत्यापन का उपयोग करने के उदाहरण ।