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

Question

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

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

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

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

Comments

HTML 5.1 ड्राफ्ट युक्ति में एक inputmodeविशेषता का उल्लेख है , जो - अगर मैं समझ रहा हूं कि मैं सही ढंग से क्या पढ़ता हूं - यह निर्दिष्ट करने के लिए उपयोग किया जा सकता है कि उपयोगकर्ता को किस प्रकार के कीबोर्ड को फ़ील्ड के साथ बातचीत करते समय पेश किया जाना चाहिए, बिना किसी सत्यापन नियमों को लागू किए बिना । भविष्य में किसी बिंदु पर, inputmodeविशेषता के बजाय विशेषता का उपयोग typeकरना संभवतः इस समस्या का सही समाधान होगा - लेकिन अभी तक नहीं।

— मार्क अमेरी

@MarkAmery हालांकि अब भविष्य में इसे हासिल करना बहुत मुश्किल नहीं होगा:$('[inputmode]').each(function () { this.attr({type: this.attr('inputmode'), novalidate: true}) });

— मार्नेन लाइबो-कोसर

@ MarnenLaibow-Koser जबकि आपने जो कुछ भी वर्णित किया है वह काम करता है यदि आप सत्यापन को बंद करना चाहते हैं (जैसा कि प्रश्न पूछने वाले द्वारा निर्दिष्ट किया गया है), यह काफी समान परिणाम प्राप्त नहीं inputmodeकरेगा। अपने तरीके से काम करते हुए, आप अभी भी (उदाहरण के लिए) गैर-संख्यात्मक मान नहीं पढ़ सकते हैं जो उपयोगकर्ता प्रकार के इनपुट बॉक्स में लिखते हैं number। उदाहरण के लिए, इस फिडेल में टेक्स्ट बॉक्स में कुछ गैर-संख्यात्मक टाइप करने और बटन पर क्लिक करने का प्रयास करें।

— मार्क अमेरी जूल

@ मकर्मी दिलचस्प। क्या इसलिए कि <input type='number'>गैर-संख्यात्मक मान बिल्कुल स्वीकार नहीं करता है?

— मार्नेन लाइबो-कोसर

@ MarnenLaibow-Koser मुझे ऐसा लगता है। समस्या के बारे में इस प्रश्न पर स्वीकृत उत्तर में यह सुनिश्चित करने के लिए एक लिंक शामिल है कि उत्तरदाता दावा करता है कि यह व्यवहार अनिवार्य है।

— मार्क ऐमी जूल

Answer 1

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

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

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

Comments

novalidate="novalidate"और novalidate=""मान्य सिंटैक्स भी है।

— बासिम

@ वसीम वैलिड सिंटैक्स लेकिन अत्यधिक क्रिया - आपको आवश्यकता से अधिक टाइप क्यों?

— 14:15 बजे user1569050

@ user1569050 CakePHP जैसे चौखटे में उदाहरण के लिए, यह novalidate="novalidate"विधि का उपयोग करेगा जब आप सरणी novalidate => trueमें सेट $optionsकरते हैं FormHelper::create()। अतिरिक्त जानकारी के लिए धन्यवाद बासीम :)

— जैलमेर

@ rybo111 यह क्लाइंट-साइड सत्यापन है, जो सर्वर से अनुरोधों की संख्या कम करने के लिए अच्छा है। यह सर्वर-साइड पर सत्यापन को आसान बनाने का कोई बहाना नहीं है।

— मार्टी

@ मार्टी मैं इस तथ्य का उल्लेख कर रहा था कि अगर मैं कुछ नए PHP सत्यापन का परीक्षण कर रहा हूं तो मैं उस फॉर्म के लिए जावास्क्रिप्ट सत्यापन को जल्दी से अक्षम कर सकता हूं ताकि पूरे फॉर्म को सही ढंग से भरने के लिए न हो। मुझे "परीक्षण करने में आसान" लिखा होना चाहिए।

— rybo111

Answer 2

मैंने युक्ति पढ़ी थी और क्रोम में कुछ परीक्षण किया था, और यदि आप "अमान्य" ईवेंट को पकड़ते हैं और गलत तरीके से लौटते हैं जो फ़ॉर्म सबमिट करने की अनुमति देता है।

मैं इस HTML के साथ 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>

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

Comments

बहुत बढ़िया - मैं इसे कल आज़माऊँगा और आपको बताऊँगा कि यह कैसे चलता है। धन्यवाद।

— निक जू

वाह! मुझे यह देखने में एक कठिन समय हो रहा था कि मेरा सबमिट इवेंट कहां गया था। धन्यवाद महोदय!

— जिप्सी किंग

फ़ायर्फ़ॉक्स इनपुट बदलने पर मान्य हो रहा है। तब 'अमान्य' ईवेंट को निकाल नहीं दिया गया है। तो, मेरे लिए कोई समाधान नहीं।

— नील्स स्टीनबेक

कल कभी नहीं आता :)

— लकी सोनी

काम नहीं करता है। मैंने कोड को एक स्निपेट बना लिया है। invalidईवेंट को पकड़ने और गलत तरीके से लौटने पर फ़ॉर्म सबमिट नहीं होने देता।

— डैन डैस्केल्स्कु

Answer 3

मैं सिर्फ यह जोड़ना चाहता था कि आपके फॉर्म में novalidate विशेषता का उपयोग करने से केवल ब्राउज़र को फॉर्म भेजने से रोका जा सकेगा। ब्राउज़र अभी भी डेटा का मूल्यांकन करता है और जोड़ता है: मान्य और: अमान्य छद्म कक्षाएं।

मुझे यह पता चला क्योंकि मान्य और अमान्य छद्म कक्षाएं एचटीएमएल 5 बॉयलरप्लेट स्टाइलशीट का हिस्सा हैं जो मैं उपयोग कर रहा हूं। मैंने अभी CSS फ़ाइल में प्रविष्टियाँ निकाली हैं जो छद्म वर्गों से संबंधित हैं। अगर किसी को कोई और उपाय मिल जाए तो कृपया मुझे बताएं।

Comments

प्रविष्टियों को क्या कहा जाता था?

— tm_forthefuture

हाहा - मुझे अब कोई अफ़सोस नहीं है। यह अब से 3 साल पहले था। :(

— BFTrick

आपका मतलब <form action="" method="" class="" id="" novalidate>:;)

— मुहम्मद शहजाद

Answer 4

सबसे अच्छा समाधान एक टेक्स्ट इनपुट का उपयोग करना और URL कीबोर्ड सुविधाएं प्रदान करने के लिए विशेषता inputmode = "url" जोड़ना है। HTML5 विनिर्देश इस उद्देश्य के लिए सोचा गया था। यदि आप टाइप = "url" रखते हैं, तो आपको वाक्यविन्यास सत्यापन प्राप्त होता है जो हर मामले में उपयोगी नहीं है (यह जांचना बेहतर है कि क्या यह वाक्यविन्यास के बजाय 404 त्रुटि देता है जो काफी अनुज्ञेय है और एक बड़ी मदद का नहीं है)।

आपके पास डिफ़ॉल्ट पैटर्न को विशेषता पैटर्न के साथ ओवरराइड करने की भी संभावना है = "https ?: //.+" उदाहरण के लिए अधिक अनुमत होने के लिए।

प्रपत्र में नोवेलिडेट विशेषता को रखना, पूछे गए प्रश्न का सही उत्तर नहीं है क्योंकि यह फ़ॉर्म के सभी फ़ील्ड के लिए मान्यता को हटा देता है और आप उदाहरण के लिए ईमेल फ़ील्ड के लिए सत्यापन रखना चाह सकते हैं।

सत्यापन को अक्षम करने के लिए jQuery का उपयोग करना भी एक बुरा समाधान है क्योंकि यह जावास्क्रिप्ट के बिना बिल्कुल काम करना चाहिए।

मेरे मामले में, मैंने URL इनपुट से पहले 2 विकल्पों (http: // या https: //) के साथ एक चुनिंदा तत्व रखा क्योंकि मुझे केवल वेबसाइटों (और कोई ftp: // या अन्य चीजों) की आवश्यकता नहीं है। इस तरह से मैं इस अजीब उपसर्ग (टिम बर्नर्स-ली का सबसे बड़ा अफसोस और शायद URL सिंटैक्स त्रुटियों का मुख्य स्रोत) टाइप करने से बचता हूं और मैं प्लेसहोल्डर (HTTP के बिना) के साथ inputmode = "url" के साथ एक सरल पाठ इनपुट का उपयोग करता हूं। मैं वेब साइट (404 नहीं) के वास्तविक अस्तित्व को प्रमाणित करने और डालने पर HTTP उपसर्ग को हटाने के लिए jQuery और सर्वर साइड स्क्रिप्ट का उपयोग करता हूं (अगर मैं पैटर्न = "^ ((? Http)।) * $" जैसे पैटर्न का उपयोग करने से बचता हूं। उपसर्ग को रोकने के लिए क्योंकि मुझे लगता है कि अधिक अनुमेय होना बेहतर है)

Answer 5

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

प्लेसहोल्डर पाठ

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

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

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

विडंबना यह है कि फ़ायरफ़ॉक्स 3.5 अपने स्वयं के वेब रूपों में प्लेसहोल्डर पाठ जोड़ने का समर्थन नहीं करता है। C'est la 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इसे आसानी से अनदेखा कर देंगे। कोई नुकसान नहीं कोई माफी नहीं। देखें कि आपका ब्राउज़र प्लेसहोल्डर टेक्स्ट का समर्थन करता है या नहीं ।

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

Comments

टिप के लिए +1, लेकिन यह दुर्भाग्य से मेरे लिए समाधान नहीं है। मैं अभी भी कोई सत्यापन नहीं करना चाहता हूं, मुख्यतः क्योंकि इसके लिए UX बहुत खराब है।

— निक

Answer 6

मैंने सीएसएस के साथ क्रोम के लिए एक समाधान खोजा, जो इस चयनकर्ता के मूल सत्यापन फॉर्म को दरकिनार किए बिना था, जो बहुत उपयोगी हो सकता है।

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

Comments

क्रोम के अंतिम संस्करण में यह काम नहीं करता है (29), मुझे आश्चर्य है कि अगर यह पलक

— झपकने

Answer 7

बस अपने रूप में नौसिखिए का उपयोग करें।

<form name="myForm" role="form" novalidate class="form-horizontal" ng-hide="formMain">

चीयर्स !!!

Comments

एकल इनपुट टैग के लिए सत्यापन अक्षम करने के बारे में क्या?

— टोबियास कोल्ब

Answer 8

यहाँ वह फ़ंक्शन है जिसका उपयोग मैं क्रोम और ओपेरा को गैर-अमान्य इनपुट का उपयोग करते समय अमान्य इनपुट संवाद दिखाने से रोकने के लिए करता हूं।

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;
});

Answer 9

आप उन अप्रिय सत्यापन बुलबुले के बारे में जानने के लिए कुछ जावास्क्रिप्ट जोड़ सकते हैं और अपने सत्यापनकर्ताओं को जोड़ सकते हैं।

document.addEventListener('invalid', (function(){
    return function(e) {
      //prevent the browser from showing default error bubble / hint
      e.preventDefault();
      // optionally fire off some custom validation handler
      // myValidation();
    };
})(), true);

Answer 10

यदि आप एक फार्म तत्व को चिह्नित करते हैं required=""तो novalidate=""मदद नहीं करता है।

requiredसत्यापन को दरकिनार करने का एक तरीका तत्व को अक्षम करना है ।

Answer 11

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

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

Comments

सुनिश्चित नहीं हैं कि बहुत सारे लोग इस समाधान को क्यों नापसंद करते हैं, यह एचटीएमएल 5 रूपों के लिए सर्वर सत्यापन को वास्तविक एचटीएमएल कोड के बिना परीक्षण करने की अनुमति देता है

— एंड्रयू

मेरा मानना है कि यह भी पसंद नहीं है, क्योंकि सवाल के आसपास केंद्रित निर्माण एक HTML5 फार्म और सभी उपयोगकर्ताओं के लिए सत्यापन को बंद करने। अपने सभी उपयोगकर्ताओं से ए) क्रोम और बी का उपयोग करने के लिए कहना आपकी साइट का उपयोग करने से पहले एक एक्सटेंशन स्थापित करना एक टेनबल समाधान नहीं है।

— कलमनेशन