validation - एचटीएमएल 5 फॉर्म तत्वों के सत्यापन को अक्षम करें




forms html5 (6)

मेरे रूप में, मैं नए HTML5 फॉर्म प्रकारों का उपयोग करना चाहता हूं, उदाहरण के लिए <input type="url" /> ( यहां के प्रकारों के बारे में अधिक जानकारी )।

समस्या यह है कि क्रोम सुपर सहायक होना चाहता है और मेरे लिए इन तत्वों को मान्य करना चाहता है, सिवाय इसके कि यह उस पर बेकार है। यदि यह अंतर्निहित सत्यापन में विफल रहता है, तो फोकस प्राप्त करने वाले तत्व के अलावा कोई संदेश या संकेत नहीं है। मैं "http://" साथ URL तत्वों को पूर्ववत करता हूं, और इसलिए मेरा स्वयं का कस्टम सत्यापन केवल उन मानों को खाली तारों के रूप में मानता है, हालांकि क्रोम इसे अस्वीकार करता है। अगर मैं इसके सत्यापन नियमों को बदल सकता हूं, तो यह भी काम करेगा।

मुझे पता है कि मैं type="text" का उपयोग करने के लिए वापस लौट सकता हूं लेकिन मुझे इन नए प्रकार के ऑफ़र का उपयोग करके अच्छे एन्हांसमेंट चाहिए (उदाहरण: यह स्वचालित रूप से मोबाइल उपकरणों पर एक कस्टम कीबोर्ड लेआउट पर स्विच करता है):

तो, स्वचालित सत्यापन को बंद या अनुकूलित करने का कोई तरीका है?


आप सरल क्रोम एक्सटेंशन इंस्टॉल कर सकते हैं और बस फ्लाई पर सत्यापन अक्षम कर सकते हैं https://chrome.google.com/webstore/detail/html5-form-validation-err/dcpagcgkpeflhhampddilklcnjdjlmlb/related

डिफ़ॉल्ट रूप से सब कुछ डिफ़ॉल्ट के रूप में काम करेगा, लेकिन आप टूलबार पर एक्सटेंशन आइकन पर एकल क्लिक के साथ एचटीएमएल 5 सत्यापन को अक्षम करने में सक्षम होंगे


क्रोम और ओपेरा को नोलिडेटेट का उपयोग करते समय भी अमान्य इनपुट संवाद दिखाने से रोकने के लिए मैं उपयोग करता हूं।

window.submittingForm = false;
$('input[novalidate]').bind('invalid', function(e) {
    if(!window.submittingForm){
        window.submittingForm = true;
        $(e.target.form).submit();
        setTimeout(function(){window.submittingForm = false;}, 100);
    }
    e.preventDefault();
    return false;
});

ब्राउज़र के सत्यापन के चारों ओर एक अंत चलाने की कोशिश करने के बजाय, आप http:// को प्लेसहोल्डर टेक्स्ट के रूप में डाल सकते हैं। यह आपके द्वारा लिंक किए गए पृष्ठ से है:

प्लेसहोल्डर टेक्स्ट

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

आपने शायद पहले प्लेसहोल्डर टेक्स्ट देखा है। उदाहरण के लिए, मोज़िला फ़ायरफ़ॉक्स 3.5 में अब स्थान पट्टी में प्लेसहोल्डर टेक्स्ट शामिल है जो "बुकमार्क और इतिहास खोजें" पढ़ता है:

जब आप स्थान पट्टी पर (या टैब) पर क्लिक करते हैं, प्लेसहोल्डर टेक्स्ट गायब हो जाता है:

विडंबना यह है कि फ़ायरफ़ॉक्स 3.5 प्लेसहोल्डर टेक्स्ट को अपने वेब फॉर्म में जोड़ने का समर्थन नहीं करता है। C'est ला vie।

प्लेसहोल्डर समर्थन

IE  FIREFOX SAFARI  CHROME  OPERA   IPHONE  ANDROID
·   3.7+    4.0+    4.0+    ·       ·       ·

यहां बताया गया है कि आप प्लेसहोल्डर टेक्स्ट को अपने स्वयं के वेब फ़ॉर्म में कैसे शामिल कर सकते हैं:

<form>
  <input name="q" placeholder="Search Bookmarks and History">
  <input type="submit" value="Search">
</form>

placeholder विशेषता का समर्थन नहीं करने वाले ब्राउज़र बस इसे अनदेखा करेंगे। कोई नुकसान नहीं कोई माफी नहीं। देखें कि आपका ब्राउज़र प्लेसहोल्डर टेक्स्ट का समर्थन करता है या नहीं

यह बिल्कुल वही नहीं होगा क्योंकि यह उपयोगकर्ता के लिए "प्रारंभ बिंदु" प्रदान नहीं करेगा, लेकिन कम से कम आधा रास्ते है।


मुझे क्रोम के साथ क्रोम के लिए एक समाधान मिला है, जो निम्न चयनकर्ता को देशी सत्यापन फॉर्म को छोड़कर बहुत उपयोगी हो सकता है।

form input::-webkit-validation-bubble-message, 
form select::-webkit-validation-bubble-message,
form textarea::-webkit-validation-bubble-message {
    display:none;
} 

इस तरह, आप अपने संदेश को कस्टमाइज़ भी कर सकते हैं ...

मुझे इस पृष्ठ पर समाधान मिलता है: http://trac.webkit.org/wiki/Styling%20Form%20Controls


मैंने spec का एक पठन पढ़ा था और क्रोम में कुछ परीक्षण किया था, और यदि आप "अमान्य" ईवेंट पकड़ते हैं और झूठी वापसी करते हैं जो प्रपत्र जमा करने की अनुमति देता है।

मैं इस एचटीएमएल के साथ jquery का उपयोग कर रहा हूँ।

// suppress "invalid" events on URL inputs
$('input[type="url"]').bind('invalid', function() {
  alert('invalid');
  return false;
});

document.forms[0].onsubmit = function () {
  alert('form submitted');
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="url" value="http://" />
  <button type="submit">Submit</button>
</form>

मैंने किसी अन्य ब्राउज़र में इसका परीक्षण नहीं किया है।


यदि आप एचटीएमएल 5 में किसी फॉर्म के लिए क्लाइंट साइड सत्यापन को अक्षम करना चाहते हैं तो फॉर्म तत्व में novalidate विशेषता जोड़ें। उदाहरण के लिए:

<form method="post" action="/foo" novalidate>...</form>

https://www.w3.org/TR/html5/sec-forms.html#element-attrdef-form-novalidate देखें





input