এইচটিএমএল 5 এ কি একটি দৈর্ঘ্য বৈধতা বিশিষ্টতা আছে?

Question

দেখে মনে হচ্ছে minlengthকোনও <input>ক্ষেত্রের জন্য গুণাবলী কাজ করে না।

এইচটিএমএল 5 তে অন্য কোনও বৈশিষ্ট্য রয়েছে যার সাহায্যে আমি ক্ষেত্রগুলির জন্য কোনও মানের ন্যূনতম দৈর্ঘ্য নির্ধারণ করতে পারি?

Comments

এটি প্রতিটি ক্ষেত্রের জন্য উত্তর হবে না, তবে আপনি যদি সেখানে কোনও মান নিশ্চিত করতে চান তবে আপনি "প্রয়োজনীয়" বৈশিষ্ট্যটি ব্যবহার করতে পারেন। <ইনপুট টাইপ = "টেক্সট" নাম = "input1" প্রয়োজনীয় = "প্রয়োজনীয়" />

— কোনটি

সম্ভাব্য সদৃশ: stackoverflow.com/questions/5533053/textarea-character-limit/...

— Web_Designer

এটি অস্তিত্বহীন, তবে আসুন আমরা একটি গোলমাল করি এবং এটি প্রবেশ করি! w3.org/Bugs/Public/show_bug.cgi?id=20557

— এরিক এলিয়ট

আপনি যদি পুরো বাস্তবায়ন করতে চান তবে আপনাকে জেএস / জ্যাকিউরি ব্যবহার করতে হবে (যেমন, প্রয়োজনীয়তা, দৈর্ঘ্য, ত্রুটি বার্তা জমা দেওয়ার সময় ইত্যাদি)। সাফারি এখনও প্রয়োজনীয় বৈশিষ্ট্যটিকে পুরোপুরি সমর্থন করে না, এবং কেবলমাত্র ক্রোম এবং অপেরা মিনেলেন্থ সমর্থন করে। উদাহরণস্বরূপ 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। আমি কেবল যুক্ত করতে চেয়েছিলাম শিরোনাম বৈশিষ্ট্যটি যদি প্যাটার্নটি পূরণ না করে তবে আপনাকে ব্যবহারকারীর কাছে প্রদর্শিত বার্তাটি সেট করতে দেয়। অন্যথায় একটি ডিফল্ট বার্তা প্রদর্শিত হবে।

— কোনটি

@ জে.মনি এটি এখনও বলেছে "দয়া করে অনুরোধ করা ফর্ম্যাটটি মেলান: <শিরোনাম>"। পূর্বনির্ধারিত পূর্বনির্ধারিত বার্তাটি বাইপাস করার কোনও উপায় আছে কি?

— সিউজেড

দুর্ভাগ্যক্রমে এটি টেক্সারিয়ার জন্য সমর্থিত নয় ।

— চোরমাস্টার

@ চাজ @ বাসজ আপনি নিম্নলিখিত বৈশিষ্ট্য যুক্ত করে একটি কাস্টম ত্রুটি বার্তা যুক্ত করতে পারেন:oninvalid="this.setCustomValidity('Your message')"

— bigtex777

যদি আপনি কোনও অবৈধ ইনপুট প্রবেশ করেন এবং আপনি ব্যবহার করছেন setCustomValidity, তবে আপনি ইনপুটটি সংশোধন করার পরেও এটি আপনাকে ত্রুটি বার্তা দেখাতে থাকবে। onchangeএটির মোকাবেলায় আপনি নিম্নলিখিত পদ্ধতিটি ব্যবহার করতে পারেন । oninvalid="this.setCustomValidity('Field must contain min. 5 characters')" onchange="try{setCustomValidity('')}catch(e){}"

— sohaiby

Answer 2

সেখানে হয় একটি minlengthসম্পত্তি HTML5 এর বৈশিষ্ট এখন, সেইসাথে validity.tooShortইন্টারফেস।

উভয়ই এখন সমস্ত আধুনিক ব্রাউজারের সাম্প্রতিক সংস্করণগুলিতে সক্ষম। বিশদগুলির জন্য, https://caniuse.com/#search=minlength দেখুন ।

Comments

ফায়ারফক্স 44 এবং এখনও প্রয়োগ করা হয়নি।

— ক্রিশ্চান লইরবাগ

এখনও ক্রোম বা অপেরার বাইরে সমর্থিত নয়। caniuse.com/#search=minleight

— rmcsharry

এটি জানুয়ারী 2017 এবং এখনও কেবল ক্রোম এবং অপেরা সমর্থন দৈর্ঘ্য

— ট্রোজাননেম

@ ট্রোজাননাম ফায়ারফক্স ৫১ তম সংস্করণminlength থেকে অ্যাট্রিবিউটকে সমর্থন করে ।

— লুকা ডিটোমি

এই স্ট্যাক ওভারফ্লো উত্তরের উপর স্থিতি আপডেট করার জন্য পর্যায়ক্রমিক মন্তব্যগুলি বর্তমান তথ্যের জন্য এখানে চেক করতে লোকদের বলার চেয়ে কম দরকারী: ক্যানিউজ.com

— #search

Answer 3

এখানে এইচটিএমএল 5-এর সমাধান রয়েছে (আপনি যদি দৈর্ঘ্য 5, সর্বোচ্চ দৈর্ঘ্যের 10 অক্ষরের বৈধতা চান)

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

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

Comments

ক্ষেত্রটি ঠিক না থাকলে কীভাবে একটি কাস্টম ত্রুটি বার্তা সেট করবেন?

— বাসজ

কাস্টম বার্তার জন্য titleপ্রয়োজনীয় বার্তার সাথে বৈশিষ্ট্য যুক্ত করুন।

— শ্রোমি হাসিদ

কয়েক মাস আগে একই patternউত্তর দেওয়া হয়েছে । এই উত্তর কিভাবে ভাল?

— ড্যান ড্যাসক্লেস্কু

@DanDascalescu- এর কাছে ফর্ম ট্যাগ এবং স্পষ্ট ব্যাখ্যা নেই। আমি একটি কার্যনির্বাহী jsfiddle ডেমো অন্তর্ভুক্ত। (বিটিডব্লিউ স্ট্যাকওভারফ্লো বিধিগুলি বলছে যে যতক্ষণ না এটি সম্প্রদায়ের পক্ষে সহায়ক ততক্ষণ একই উত্তর দেওয়া নিষিদ্ধ)

— আলী Aliarıkçıoğlu

আরও ভাল উত্তর দেওয়ার একটি উপায় হ'ল এখানে চালানোযোগ্য কোড স্নিপেট হিসাবে ডেমোটিকে এখানে এসওতে অন্তর্ভুক্ত করা ।

— ড্যান ড্যাসক্লেস্কু

Answer 4

হ্যাঁ, এটা আছে। এটি দৈর্ঘ্যের মতো। W3.org ডকুমেন্টেশন: http://www.w3.org/TR/html5/forms.html#attr-fe- দৈর্ঘ্য

যদি minlengthকাজ না করে patternতবে inputট্যাগটির জন্য @ Pumbaa80 দ্বারা উল্লিখিত বৈশিষ্ট্যটি ব্যবহার করুন ।

টেক্সারিয়ার জন্য: সর্বোচ্চ সেট করার জন্য; ব্যবহার করুন maxlengthএবং কমপক্ষে এই লিঙ্কে যান ।

আপনি এখানে সর্বোচ্চ এবং সর্বনিম্ন উভয়ই পাবেন।

Answer 5

আমি এর সাথে বা বাইরেও সর্বোচ্চতা এবং দৈর্ঘ্য ব্যবহার করেছি এবং requiredএটি HTML5 এর জন্য আমার পক্ষে খুব ভাল কাজ করেছে।

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

`

Answer 6

minLength অ্যাট্রিবিউট (ম্যাক্সেলেন্টের বিপরীতে) HTML5 এ স্থানীয়ভাবে বিদ্যমান নেই native তবে ক্ষেত্রটিতে 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

"মিনিট দৈর্ঘ্য বৈশিষ্ট্য (সর্বোচ্চ দৈর্ঘ্যের বিপরীতে) এইচটিএমএল 5 তে স্থানীয়ভাবে বিদ্যমান নেই" হ্যাঁ এটি করে: w3.org/TR/html5/…

— মাইকম্যাকানা

এখনও ক্রোম বা অপেরার বাইরে সমর্থিত নয়। caniuse.com/#search=minlength

— rmcsharry

Answer 7

এইচটিএমএল 5 নয়, তবে ব্যবহারিকভাবে: আপনি যদি কৌনিক জেএস ব্যবহার করতে চান তবে আপনি ng-minlengthইনপুট এবং পাঠ্য উভয়ই ব্যবহার করতে পারেন । আরও দেখুন এই বাজা ।

Comments

যদি কৌণিকটি মানদণ্ড অনুসারে লিখিত হয় তবে তারা এমন কিছু ব্যবহার করত data-ng-minlengthতবে কেন কোনও বিকাশকারী মান সম্পর্কে যত্নবান হন? > __>

— জন

প্রিয় মান অনুসারী, আপনি data-ng-minlengthপাশাপাশি ব্যবহার করতে পারেন ।

— mik01aj

Answer 8

ন্যূনতম দৈর্ঘ্য পরীক্ষা করার জন্য টেক্সারিয়ার জন্য আমার সমাধান jQuery ব্যবহার করা এবং এইচটিএমএল 5 প্রয়োজনীয় বৈধতার সংমিশ্রণের জন্য solution

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>

তবে, অন্যান্য এইচটিএমএল 5 বৈশিষ্ট্যগুলির মতো, আইই 11 এই প্যানোরামাটি থেকে অনুপস্থিত। সুতরাং, আপনার যদি বিস্তৃত আইই 11 ব্যবহারকারী ব্যবহারকারী থাকে patternতবে বেশিরভাগ ব্রাউজারগুলিতে (আই 11 সহ) প্রায় বোর্ড জুড়ে সমর্থিত এইচটিএমএল 5 বৈশিষ্ট্যটি ব্যবহার করার বিষয়টি বিবেচনা করুন ।

একটি সুন্দর এবং অভিন্ন বাস্তবায়ন এবং হতে পারে এক্সটেনসিবল বা গতিশীল (আপনার এইচটিএমএল উত্পন্ন কাঠামোর উপর ভিত্তি করে), আমি এই 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>

উদাহরণস্বরূপ, ক্রোমে (তবে বেশিরভাগ ব্রাউজারে একই), আপনি নিম্নলিখিত ত্রুটি বার্তা পাবেন:

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

ব্যবহার করে minlengthএবং

Please match the format requested

ব্যবহার করে pattern।

Answer 10

নতুন সংস্করণ:

এটি ব্যবহারকে প্রসারিত করে (টেক্সারিয়া এবং ইনপুট) এবং বাগগুলি সংশোধন করে।

// 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 আইটেম = এই.ইলিমেন্টস; ফর্মের আইটেমগুলি নয়, ফর্ম সংগ্রহ সংগ্রহ করছে। রহস্যময়।

— rmcharry

Answer 11

আমি লক্ষ্য করেছি যে কখনও কখনও ক্রোমে যখন অটোফিল চালু থাকে এবং পদ্ধতিগুলি অটোফিল ব্রাউজার তৈরি করে ক্ষেত্রগুলি ফিল্ড হয়, এটি ন্যূনতম দৈর্ঘ্যের বৈধতা বিধিগুলিকে বাইপাস করে, সুতরাং এই ক্ষেত্রে আপনাকে নিম্নলিখিত বৈশিষ্ট্য দ্বারা অটোফিল অক্ষম করতে হবে:

স্বয়ংসম্পূর্ণ = "বন্ধ"

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

Comments

এটি পাসওয়ার্ড ক্ষেত্রগুলি সম্পর্কে নয়।

— ইগর পপভ

এটি এইচটিএমএল ইনপুট সম্পর্কে, পাসওয়ার্ড প্রকৃতপক্ষে এইচটিএমএল ইনপুট।

— তালসিবনি

Answer 12

Http://caniuse.com/#search=minleth দেখুন , কিছু ব্রাউজার এই বৈশিষ্ট্যটি সমর্থন নাও করতে পারে।

---

"টাইপ" এর মান যদি এর মধ্যে একটি হয়:

পাঠ্য, ইমেল, অনুসন্ধান, পাসওয়ার্ড, টেলিফোন বা ইউআরএল (সতর্কতা: নম্বর অন্তর্ভুক্ত নয় | এখন কোনও ব্রাউজার "টেল" সমর্থন করে না - 2017.10)

ব্যবহারের দয়া করে MINLENGTH (/ MAXLENGTH) অ্যাট্রিবিউট, এটা অক্ষরের সর্বনিম্ন সংখ্যা নির্দিষ্ট করে।

যেমন।

<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">

যদি "টাইপ" সংখ্যাটি হয় তবে অ্যালথোথ মাইলেইনথ (/ ম্যাক্সেলেন্থ) সমর্থন না করা হয় তবে আপনি এর পরিবর্তে ন্যূনতম (/ সর্বোচ্চ) বৈশিষ্ট্যটি ব্যবহার করতে পারেন ।

যেমন।

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

Answer 13

আমি এই জাভাস্ক্রিপ্ট কোডটি লিখেছি, [minleight.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

আমার ক্ষেত্রে, যা আমি সবচেয়ে ম্যানুয়ালি এবং Firefox (43.0.4) ব্যবহার করে যাচাই, minlengthএবং validity.tooShortদুর্ভাগ্যবশত পাওয়া যায় না।

যেহেতু আমার কেবল অগ্রসর হওয়ার জন্য ন্যূনতম দৈর্ঘ্যের সঞ্চিত হওয়া দরকার তাই একটি সহজ এবং সহজ উপায় হ'ল ইনপুট ট্যাগের অন্য কোনও বৈধ বৈশিষ্ট্যের সাথে এই মানটি নির্ধারণ করা। যে ক্ষেত্রে তারপর, আপনি ব্যবহার করতে পারেন min, maxএবং step[টাইপ = "সংখ্যা"] ইনপুট থেকে বৈশিষ্ট্য।

অ্যারেতে এই সীমাগুলি সংরক্ষণ করার পরিবর্তে অ্যারে সূচকটি মিলিয়ে উপাদান আইডি না পেয়ে একই ইনপুটটিতে এটি সঞ্চিত পাওয়া সহজ।

Answer 17

সর্বাধিক এবং একটি ন্যূনতম মান উভয়ই যোগ করুন যা আপনি অনুমোদিত মানের সীমা নির্দিষ্ট করতে পারেন:

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