जांचें कि क्या ब्राउज़र ने HTML5 फॉर्म सत्यापन में अंतर्निहित किया है?

Question

यह जांचने के लिए कि क्या कोई ब्राउज़र HTML5 निर्मित सत्यापन क्षमता में अंतर्निहित है या नहीं? ऐसा करके, हमें उन ब्राउज़रों पर jQuery फॉर्म सत्यापन फ़ंक्शन लागू करने की आवश्यकता नहीं है जो स्वयं फॉर्म को प्रमाणित कर सकते हैं।

if (typeof document.createElement("input").checkValidity == "function") { 
    alert("Your browser has built-in form validation!"); 
} 

Answer 1

, बस की जांच checkValidity() समारोह मौजूद:

डेमो: http://jsfiddle.net/ThinkingStiff/cmSJw/

function hasFormValidation() { 

    return (typeof document.createElement('input').checkValidity == 'function'); 

}; 

इसे इस तरह कॉल:

if(hasFormValidation()) { 
    //HTML5 Form Validation supported 
}; 

Answer 2

आप ऐसा कर सकते हैं Modernizr जावास्क्रिप्ट http://www.modernizr.com/ का उपयोग कर:

[हल] ThinkingStiff के जवाब के आधार पर, यहाँ एक तरीका है। आप html5 form validation modernizr safari इस पोस्ट से सहायता ले सकते हैं। तुम भी modernizr लोड

Modernizr.load के लिए बुनियादी वाक्यविन्यास() का लाभ ले सकते यह निम्नलिखित गुण के साथ एक वस्तु पारित करने के लिए है:

• परीक्षण: Modernizr संपत्ति आप पता लगाने के लिए चाहते हैं।
• हाँ: परीक्षण सफल होने पर आप जिस स्क्रिप्ट को लोड करना चाहते हैं उसका स्थान। एकाधिक स्क्रिप्ट के लिए एक सरणी का प्रयोग करें।
• नहीं: परीक्षण विफल होने पर आप जिस स्क्रिप्ट को लोड करना चाहते हैं उसका स्थान। एकाधिक स्क्रिप्ट के लिए एक सरणी का प्रयोग करें।
• पूर्ण: बाहरी स्क्रिप्ट लोड होने के तुरंत बाद एक फ़ंक्शन चलाने के लिए (वैकल्पिक)।

दोनों हाँ और नाप वैकल्पिक हैं, जब तक आप उनमें से एक को आपूर्ति करते हैं।

लोड और check_required.js में स्क्रिप्ट को निष्पादित, निम्नलिखित ब्लॉक जोड़ने के बाद modernizr.adc.js पेज से जुड़ी किया गया है (कोड required_load.html में है) करने के लिए:

<script> 
    Modernizr.load({ 
    test: Modernizr.input.required, 
    nope: 'js/check_required.js', 
    complete: function() { 
     init(); 
    } 
    }); 
</script> 

स्रोत: http://www.adobe.com/devnet/dreamweaver/articles/using-modernizr.html

Answer 3

कैसे के बारे में

function hasFormValidation() { 
    return 'noValidate' in document.createElement('form'); 
} 

स्रोत: http://diveintohtml5.info/everything.html#novalidate

Answer 4

एंड्रॉयड एक (संस्करण 4.4 से पहले), की तरह नाविकों के साथ एक समस्या है जो checkValidity लागू करता है (और वास्तव में यह फ़ंक्शन इनपुट की जांच करता है) लेकिन कुछ इनपुट अमान्य होने पर ब्राउजर उपयोगकर्ता को कोई जानकारी नहीं देता है (और फॉर्म भेजता है)।

हालांकि, आप जांच सकते हैं कि validationMessage का उपयोग कर कोई समस्या है या नहीं। यह प्रॉपर्टी आपको त्रुटि संदेश दिखाती है कि ब्राउज़र उपयोगकर्ता को दिखाएगा। यदि checkValidity() गलत है लेकिन validationMessage नहीं है ब्राउज़र में पूरा HTML5 फॉर्म सत्यापन समर्थन नहीं है।

मैंने यह कार्य किया है।यह तर्क के रूप में सभी क्षेत्रों के रूप में की आवश्यकता है:

canValidateFields() {  
    var result = typeof document.createElement('input').checkValidity == 'function'; 
    if (result) { 
     for (var i = 0; i < arguments.length; i++) { 
      var element = document.getElementById(arguments[i]); 
      if (!element.checkValidity() && (!element.validationMessage || element.validationMessage === null || element.validationMessage === '')) { 
       return false; 
      } 
     } 
    } 
    return result; 
} 

नमूना: http://jsfiddle.net/pmnanez/ERf9t/2/

Answer 5

निम्नलिखित परीक्षणों सफारी के लिए काम नहीं किया:

'noValidate' in document.createElement('form')

और

typeof document.createElement('input').checkValidity == 'function'

वे true की रिपोर्ट करते हैं जब false की उम्मीद थी, क्योंकि सफारी अवैध फ़ील्ड की रिपोर्ट नहीं करता है।

हालांकि, इस परीक्षण काम करता है:

'reportValidity' in document.createElement('form')

(आईई या Android पर परीक्षण नहीं)

संपादित करें: सफारी को मान्य करता है, लेकिन रिपोर्ट नहीं करता है, जो के लिए प्रतिक्रियाओं बताते हैं ये परीक्षण अमान्य फ़ील्ड सीएसएस :invalid छद्म वर्ग के माध्यम से खोजा जा सकता है। इन परीक्षणों का एक संयोजन यह सत्यापित करने के लिए किया जा सकता है कि ब्राउज़र सत्यापन का समर्थन नहीं करता है, और रिपोर्ट करें कि ब्राउज़र कहां रिपोर्ट नहीं करता है।