एचटीएमएल 5 में एक minlength सत्यापन विशेषता है?

Question

ऐसा लगता है कि minlengthकिसी <input>फ़ील्ड के लिए विशेषता काम नहीं करती है।

HTML5 में कोई अन्य विशेषता है जिसकी सहायता से मैं खेतों के लिए न्यूनतम लंबाई निर्धारित कर सकता हूं?

Comments

यह हर क्षेत्र के लिए उत्तर नहीं होगा, लेकिन यदि आप केवल यह सुनिश्चित करना चाहते हैं कि एक मूल्य है तो आप "आवश्यक" विशेषता का उपयोग कर सकते हैं। <इनपुट प्रकार = "पाठ" नाम = "इनपुट 1" आवश्यक = "आवश्यक" />

— कोई भी

संभावित डुप्लिकेट: stackoverflow.com/questions/5533053/textarea-character-limit/…

— Web_Designer

यह मौजूद नहीं है, लेकिन चलो एक उपद्रव करें और इसे प्राप्त करें! w3.org/Bugs/Public/show_bug.cgi?id=20557

— एरिक इलियट

यदि आप पूर्ण कार्यान्वयन करना चाहते हैं तो आपको JS / Jquery का उपयोग करने की आवश्यकता है (उदाहरण प्रस्तुत करना आवश्यक है, न्यूनतम, त्रुटि संदेश जब आदि सबमिट करें)। सफारी अभी भी पूरी तरह से आवश्यक विशेषता का समर्थन नहीं करता है, और केवल क्रोम और ओपेरा मिनिमल का समर्थन करते हैं। उदा। caniuse.com/#search=required

— rmcsharry

Answer 1

आप patternविशेषता का उपयोग कर सकते हैं । requiredविशेषता भी जरूरी है, नहीं तो एक खाली मूल्य के साथ एक इनपुट फ़ील्ड से बाहर रखा जाएगा बाधा मान्यता ।

<input pattern=".{3,}"   required title="3 characters minimum">
<input pattern=".{5,10}" required title="5 to 10 characters">

यदि आप "रिक्त, या न्यूनतम लंबाई" के लिए पैटर्न का उपयोग करने का विकल्प बनाना चाहते हैं, तो आप निम्न कार्य कर सकते हैं:

<input pattern=".{0}|.{5,10}" required title="Either 0 OR (5 to 10 chars)">
<input pattern=".{0}|.{8,}"   required title="Either 0 OR (8 chars minimum)">

Comments

JQuery के बजाय html5 का उपयोग करने के लिए +1। मैं बस यह जोड़ना चाहता था कि शीर्षक विशेषता आपको उपयोगकर्ता को प्रदर्शित करने के लिए संदेश सेट करने की अनुमति देती है यदि पैटर्न पूरा नहीं हुआ है। अन्यथा एक डिफ़ॉल्ट संदेश दिखाया जाएगा।

— कोई भी

@ J.Money यह अभी भी कहता है "कृपया अनुरोधित प्रारूप से मेल खाएं: <शीर्षक>"। क्या पूर्व डिफ़ॉल्ट संदेश को बायपास करने का कोई तरीका है?

— CZZ

दुर्भाग्य से यह textareas के लिए समर्थित नहीं है ।

— ThiefMaster

@ChaZ @Basj आप निम्नलिखित विशेषता जोड़कर एक कस्टम त्रुटि संदेश दे सकते हैं:oninvalid="this.setCustomValidity('Your message')"

— bigtex777

यदि आप एक अमान्य इनपुट दर्ज करते हैं और आप उपयोग कर रहे हैं setCustomValidity, तो यह आपको इनपुट सही करने के बाद भी त्रुटि संदेश दिखाता रहेगा। आप इसका onchangeमुकाबला करने के लिए निम्न विधि का उपयोग कर सकते हैं । oninvalid="this.setCustomValidity('Field must contain min. 5 characters')" onchange="try{setCustomValidity('')}catch(e){}"

— सोहैबी

Answer 2

वहाँ है एक minlengthमें संपत्ति एचटीएमएल 5 कल्पना अब है, साथ ही validity.tooShortइंटरफ़ेस।

दोनों अब सभी आधुनिक ब्राउज़रों के हाल के संस्करणों में सक्षम हैं। विवरण के लिए, https://caniuse.com/#search=minlength देखें ।

Comments

फ़ायरफ़ॉक्स 44 और अभी भी लागू नहीं किया गया है।

— ईसाई L --irbag

अभी भी क्रोम या ओपेरा के बाहर समर्थित नहीं है। caniuse.com/#search=minlength

— rmcsharry

यह जनवरी 2017 है और अभी भी केवल क्रोम और ओपेरा समर्थन

— minlength

@TrojanName फ़ायरफ़ॉक्स संस्करण 51 केminlength बाद से विशेषता का समर्थन करता है ।

— लुका डेटोमी

इस स्टैक ओवरफ्लो उत्तर पर स्थिति को अपडेट करने के लिए आवधिक टिप्पणियां लोगों को वर्तमान जानकारी के लिए यहां जांच करने के लिए कहने से कम उपयोगी नहीं हैं: caniuse.com/#search=minlength

— chadoh

Answer 3

यहाँ HTML5- केवल समाधान है (यदि आप 5 minlength चाहते हैं, तो अधिकतम 10 वर्ण सत्यापन)

http://jsfiddle.net/xhqsB/102/

<form>
  <input pattern=".{5,10}">
  <input type="submit" value="Check"></input>
</form>

Comments

यदि फ़ील्ड ठीक नहीं है तो कस्टम त्रुटि संदेश कैसे सेट करें?

— बसज

कस्टम संदेश titleके लिए आवश्यक संदेश के साथ विशेषता जोड़ें ।

— श्लोमी हसीद

ऐसा ही patternजवाब कुछ महीने पहले दिया गया है । यह उत्तर कैसे बेहतर है?

— डैन डस्केलस्क्यू

@DanDascalescu उनके पास टैग और स्पष्ट स्पष्टीकरण नहीं है। मैंने एक वर्किंग jsfiddle डेमो भी शामिल किया। (btw Stackoverflow के नियम कहते हैं कि जब तक यह समुदाय के लिए उपयोगी हो, तब तक ऐसे ही जवाब देने की मनाही नहीं है)

— अली --arıkçıoğlu

एक बेहतर जवाब देने का एक तरीका यह भी है कि एसओ पर डेमो को एक रन कोडेबल स्निपेट के रूप में शामिल किया जाए ।

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

Answer 4

हाँ, वहाँ यह है। यह अधिकतम गति की तरह है। W3.org प्रलेखन: http://www.w3.org/TR/html5/forms.html#attr-fe-minlength

यदि minlengthकाम नहीं करता है, patternतो inputटैग के लिए @ Pumbaa80 द्वारा बताई गई विशेषता का उपयोग करें ।

Textarea के लिए: अधिकतम सेटिंग के लिए; उपयोग maxlengthऔर मिनट के लिए इस लिंक पर जाएँ ।

आपको यहाँ अधिकतम और न्यूनतम दोनों मिलेंगे।

Answer 5

मैंने साथ या बिना अधिकतम गति और मीनल का उपयोग किया requiredऔर यह मेरे लिए HTML5 के लिए बहुत अच्छा काम किया।

<input id="passcode" type="password" minlength="8" maxlength="10">

`

Answer 6

minlength विशेषता (maxLength के विपरीत) HTML5 में मूल रूप से मौजूद नहीं है। हालाँकि किसी फ़ील्ड को मान्य करने के कुछ तरीके हैं यदि उसमें x वर्ण कम हैं।

इस लिंक पर jQuery का उपयोग करके एक उदाहरण दिया गया है: http://docs.jquery.com/Plugins/Validation/Methods/minlength

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script type="text/javascript">
jQuery.validator.setDefaults({
    debug: true,
    success: "valid"
});;
</script>

  <script>
  $(document).ready(function(){
    $("#myform").validate({
  rules: {
    field: {
      required: true,
      minlength: 3
    }
  }
});
  });
  </script>
</head>
<body>

<form id="myform">
  <label for="field">Required, Minimum length 3: </label>
  <input class="left" id="field" name="field" />
  <br/>
  <input type="submit" value="Validate!" />
</form>

</body>
</html>

Comments

"minLength विशेषता (maxLength के विपरीत) HTML5 में मूल रूप से मौजूद नहीं है" हाँ यह करता है: w3.org/TR/html5/…

— mikemaccana

अभी भी क्रोम या ओपेरा के बाहर समर्थित नहीं है। caniuse.com/#search=minlength

— rmcsharry

Answer 7

HTML5 नहीं, लेकिन व्यावहारिक रूप से: यदि आप AngularJS का उपयोग करने के लिए होते हैं , तो आप ng-minlengthइनपुट और टेक्स्टारेज़ दोनों के लिए उपयोग कर सकते हैं । इस प्लंक को भी देखें ।

Comments

अगर एंगुलर को मानकों के अनुरूप लिखा जाता है, तो वे कुछ ऐसा इस्तेमाल करते होंगे, data-ng-minlengthलेकिन एक डेवलपर मानकों का ध्यान क्यों रखेगा? > __>

— जॉन

प्रिय मानक अनुयायी, आप उपयोग कर सकते हैं data-ng-minlengthऔर साथ ही ।

— mik01aj

Answer 8

JQuery का उपयोग करके textarea के लिए मेरा समाधान और न्यूनतम लंबाई की जांच के लिए HTML5 के संयोजन की आवश्यकता है।

minlength.js

$(document).ready(function(){
  $('form textarea[minlength]').on('keyup', function(){
    e_len = $(this).val().trim().length
    e_min_len = Number($(this).attr('minlength'))
    message = e_min_len <= e_len ? '' : e_min_len + ' characters minimum'
    this.setCustomValidity(message)
  })
})

एचटीएमएल

<form action="">
  <textarea name="test_min_length" id="" cols="30" rows="10" minlength="10"></textarea>
</form>

Comments

बहुत उपयोगी और सुरुचिपूर्ण जवाब!

— सिल्वियो डेलगाडो

Answer 9

minlengthअधिकांश ब्राउज़रों में अब विशेषता व्यापक रूप से समर्थित है ।

<input type="text" minlength="2" required>

लेकिन, अन्य HTML5 विशेषताओं के साथ, IE11 इस चित्रमाला से गायब है। इसलिए, यदि आपके पास एक विस्तृत IE11 उपयोगकर्ता आधार है, तो patternएचटीएमएल 5 विशेषता का उपयोग करने पर विचार करें, जो कि अधिकांश ब्राउज़रों में बोर्ड भर में समर्थित है (जिसमें 1111 भी शामिल है)।

एक अच्छा और एकसमान कार्यान्वयन और शायद एक्स्टेंसिबल या डायनामिक (आपके HTML को बनाने वाले ढांचे के आधार पर), मैं patternविशेषता के लिए वोट करूंगा :

<input type="text" pattern=".{2,}" required>

उपयोग करते समय अभी भी एक छोटा प्रयोज्य पकड़ हैpattern । उपयोग करते समय उपयोगकर्ता को एक गैर-सहज ज्ञान युक्त (बहुत सामान्य) त्रुटि / चेतावनी संदेश दिखाई देगा pattern। देखें इस jsfiddle या नीचे:

<h3>In each form type 1 character and press submit</h3>
</h2>
<form action="#">
  Input with minlength: <input type="text" minlength="2" required name="i1">
  <input type="submit" value="Submit">
</form>
<br>
<form action="#">
  Input with patern: <input type="text" pattern=".{2,}" required name="i1">
  <input type="submit" value="Submit">
</form>

उदाहरण के लिए, Chrome में (लेकिन अधिकांश ब्राउज़रों में समान), आपको निम्न त्रुटि संदेश मिलेंगे:

Please lengthen this text to 2 characters or more (you are currently using 1 character)

का उपयोग करके minlengthऔर

Please match the format requested

का उपयोग करके pattern।

Answer 10

नया संस्करण:

यह उपयोग (textarea और इनपुट) का विस्तार करता है और बग को ठीक करता है।

// Author: Carlos Machado
// Version: 0.2
// Year: 2015
window.onload = function() {
    function testFunction(evt) {
        var items = this.elements;
        for (var j = 0; j < items.length; j++) {
            if ((items[j].tagName == "INPUT" || items[j].tagName == "TEXTAREA") && items[j].hasAttribute("minlength")) {
                if (items[j].value.length < items[j].getAttribute("minlength") && items[j].value != "") {
                    items[j].setCustomValidity("The minimum number of characters is " + items[j].getAttribute("minlength") + ".");
                    items[j].focus();
                    evt.defaultPrevented;
                    return;
                }
                else {
                    items[j].setCustomValidity('');
                }
            }
        }
    }
    var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
    var isChrome = !!window.chrome && !isOpera;
    if(!isChrome) {
        var forms = document.getElementsByTagName("form");
        for(var i = 0; i < forms.length; i++) {
            forms[i].addEventListener('submit', testFunction,true);
            forms[i].addEventListener('change', testFunction,true);
        }
    }
}

Comments

इस सुरुचिपूर्ण अद्यतन समाधान के लिए धन्यवाद। क्या यह क्रोम / ओपेरा के बाहर काम करता है क्योंकि वे मिनरलेंथ का समर्थन नहीं करते हैं? caniuse.com/#search=minlength मैंने सिर्फ मैक सफारी पर इसका परीक्षण किया है और यह काम नहीं करता है :( मैं देख रहा हूं कि आप गैर क्रोम / ओपेरा ब्राउज़रों के लिए इवेंटलिस्ट जोड़ रहे हैं, इसलिए शायद मैं कुछ गलत कर रहा हूं।

— rmcsharry

सफारी को डिबग करने के बाद ऐसा लगता है कि var आइटम = this.elements; प्रपत्र में आइटम नहीं, FORMS संग्रह लौटा रहा है। अजीब।

— rmcsharry

Answer 11

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

स्वत: पूर्ण = "बंद"

<input autocomplete="new-password" name="password" id="password" type="password" placeholder="Password" maxlength="12" minlength="6" required />

Comments

यह पासवर्ड फ़ील्ड के बारे में नहीं है।

— इगोर पोपोव

यह HTML इनपुट के बारे में है, पासवर्ड वास्तव में HTML इनपुट है।

— talsibony

Answer 12

Http://caniuse.com/#search=minlength देखें , कुछ ब्राउज़र इस विशेषता का समर्थन नहीं कर सकते हैं।

---

यदि "प्रकार" का मान उनमें से एक है:

पाठ, ईमेल, खोज, पासवर्ड, टेलीफोन, या url (चेतावनी: नहीं शामिल संख्या | कोई ब्राउज़र समर्थन "टेलीफोन" अब - 2017.10)

माइनलेंथ (/ अधिकतम गति) विशेषता का उपयोग करें , यह वर्णों की न्यूनतम संख्या को निर्दिष्ट करता है।

जैसे।

<input type="text" minlength="11" maxlength="11" pattern="[0-9]*" placeholder="input your phone number">

या "पैटर्न" विशेषता का उपयोग करें:

<input type="text" pattern="[0-9]{11}" placeholder="input your phone number">

"प्रकार" है संख्या , althougth MINLENGTH (/ maxlength) का समर्थन नहीं किया है, तो आप उपयोग कर सकते हैं मिनट के बजाय यह (/ अधिकतम) विशेषता।

जैसे।

<input type="number" min="100" max="999" placeholder="input a three-digit number">

Answer 13

मैंने यह जावास्क्रिप्ट कोड लिखा, [minlength.js]:

window.onload = function() {
    function testaFunction(evt) {
        var elementos = this.elements;
        for (var j = 0; j < elementos.length; j++) {
            if (elementos[j].tagName == "TEXTAREA" && elementos[j].hasAttribute("minlength")) {
                if (elementos[j].value.length < elementos[j].getAttribute("minlength")) {
                    alert("The textarea control must be at least " + elementos[j].getAttribute("minlength") + " characters.");
                    evt.preventDefault();
                };
            }
        }
    }
    var forms = document.getElementsByTagName("form");
    for(var i = 0; i < forms.length; i++) {
        forms[i].addEventListener('submit', testaFunction, true);
    }
}

Answer 14

यदि यह व्यवहार करने की इच्छा है, तो
हमेशा इनपुट क्षेत्र पर एक छोटा उपसर्ग दिखाएं या उपयोगकर्ता उपसर्ग को मिटा नहीं सकता है :

   //prefix="prefix_text"
   //if the user change the prefix, restore the input with the prefix:
   if(document.getElementById('myInput').value.substring(0,prefix.length).localeCompare(prefix)) 
       document.getElementById('myInput').value = prefix;

Answer 15

मैंने तब अधिकतम और न्यूनतम उपयोग किया था और इसने मेरे लिए बहुत अच्छा काम किया लेकिन मुझे यकीन नहीं है कि यह एक कोडिंग विधि है। मुझे उम्मीद है यह मदद करेगा

<input type="text" maxlength="13" name ="idnumber" class="form-control"  minlength="13" required>

Answer 16

मेरे मामले में, जिसमें मैं सबसे अधिक मैन्युअल रूप से और फ़ायरफ़ॉक्स (43.0.4) का उपयोग करके मान्य करता हूं, minlengthऔर validity.tooShortदुर्भाग्य से उपलब्ध नहीं हैं।

चूँकि मुझे केवल आगे बढ़ने के लिए न्यूनतम लंबाई जमा करने की आवश्यकता है, इसलिए एक आसान और आसान तरीका यह है कि इस मूल्य को इनपुट टैग की किसी अन्य मान्य विशेषता के लिए असाइन किया जाए। उस मामले तो में, आप उपयोग कर सकते हैं min, maxऔर step[प्रकार = "number"] आदानों से गुण।

किसी सरणी में उन सीमाओं को संग्रहीत करने के बजाय, सरणी इंडेक्स से मिलान करने के लिए तत्व आईडी प्राप्त करने के बजाय इसे उसी इनपुट में संग्रहीत करना आसान है।

Answer 17

अधिकतम और न्यूनतम मूल्य दोनों को जोड़ें जो आप अनुमत मानों की श्रेणी निर्दिष्ट कर सकते हैं:

<input type="number" min="1" max="999" />