के बीच क्या अंतर है: सीमा से बाहर और: अवैध?

Question

उदाहरण

input[type="number"] { 
    background: white; 
    color: black; 
} 
input[type="number"]:in-range { 
    background: green; 
    color: white; 
} 
input[type="number"]:out-of-range { 
    background: red; 
    color: white; 
} 

<input c type="number" min="1" max="100"> 

:out-of-range और :invalid के बीच क्या अंतर है?

Answer 1

:out-of-range चयनकर्ता तत्वों सेट min और इनपुट

<input type="number" min="5" max="10" value="17"> <!-- Gets selected with :out-of-range --> 
<input type="number" min="5" max="10" value="8"> <!-- Does not get selected with :out-of-range --> 

:invalid चयनकर्ता तत्वों है कि जो भी लिखते इनपुट है के अनुसार अमान्य हैं का चयन करता है की max मूल्यों के बाहर है कि एक मूल्य है कि चयन करता है।

<input type="email" value="abc@gmail.com"> <!-- Is a valid e-mail address and does not get selected with :invalid --> 
<input type="email" value="foo"> <!-- Is not a valid e-mail address and gets selected with :invalid --> 

JSFiddle

Answer 2

यह सरल है लेकिन याद रखें कि कुछ ब्राउज़रों इन सुविधाओं का समर्थन नहीं करता है।

: बाहर के रेंज

<input type="date" name="dateCheck" min="2000-01-01" max="2016-07-06"> 
<!-- in this case if you enter date after 2016-07-06 input:out-of-range will match --> 

: आउट-ऑफ-सीमा का भी एक निर्धारित सीमा के बाहर है कि एक मूल्य के साथ सभी तत्वों का चयन करता है।

नोट:: ऑफ-ऑफ-रेंज चयनकर्ता केवल सीमा सीमाओं वाले तत्वों के लिए काम करता है, जैसे न्यूनतम और अधिकतम विशेषताओं वाले इनपुट तत्व।

युक्ति: निर्दिष्ट श्रेणी के भीतर मौजूद मान वाले सभी तत्वों का चयन करने के लिए इन-श्रेणी चयनकर्ता का उपयोग करें।

स्रोत: http://www.w3schools.com/cssref/sel_out-of-range.asp

: में दूरी भी के संस्करण उल्टा होता है: बाहर के रेंज

: अवैध

<input type="date" name="dateCheckInvalid" min="2016-07-06"> 
<!-- in this case if u enter date before 2016-07-06 input:invalid will match --> 

अवैध अमान्य चयनकर्ता एस तत्वों को एक मान के साथ चुना जाता है जो तत्व की सेटिंग्स के अनुसार मान्य नहीं होता है।

नोट:: अवैध चयनकर्ता केवल इस तरह के नंबर क्षेत्रों आदि मिनट के साथ इनपुट तत्वों और अधिकतम जिम्मेदार बताते हैं, एक कानूनी ईमेल के बिना ईमेल फ़ील्ड, या संख्यात्मक मान के बिना,

टिप के रूप में सीमाओं के साथ प्रपत्र तत्वों, के लिए काम करता : तत्व चयनकर्ताओं के अनुसार मान्य मान वाले मान तत्वों का चयन करने के लिए वैध चयनकर्ता का उपयोग करें।

स्रोत: https://jsfiddle.net/bytdubk4/

Answer 3

आउट-ऑफ-सीमा का भी निर्दिष्ट शैली ही अगर इनपुट तत्व का मान "सीमा से बाहर" है लागू होता है: http://www.w3schools.com/cssref/sel_invalid.asp

सरल डेमो देखें।आउट-ऑफ-रेंज चयनकर्ता केवल सीमा सीमाओं वाले तत्वों के लिए काम करता है, जैसे न्यूनतम और अधिकतम विशेषताओं वाले इनपुट तत्व।

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

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

उदाहरण: जब कोई इनपुट ईमेल अमान्य के रूप में पाया जाता है, तो इनपुट फ़ील्ड को अक्षम किया जा सकता है जबकि उपयोगकर्ता को अधिसूचना/निर्देश प्रदर्शित किया जा रहा है।