Apakah ada atribut validasi minlength di HTML5?

608

Tampaknya minlengthatribut untuk <input>bidang tidak berfungsi.

Apakah ada atribut lain dalam HTML5 dengan bantuan yang saya dapat mengatur panjang minimal nilai untuk bidang?

html  html5-validation 
— emilan
sumber
3
Itu tidak akan menjadi jawaban untuk setiap bidang, tetapi jika Anda hanya ingin memastikan nilai ada di sana Anda dapat menggunakan atribut "wajib". <input type = "text" name = "input1" required = "required" />
— Tidak Ada
1
— Web_Designer
7
Itu tidak ada, tapi mari kita membuat keributan dan mendapatkannya! w3.org/Bugs/Public/show_bug.cgi?id=20557
— Eric Elliott
Anda perlu menggunakan JS / Jquery jika Anda ingin melakukan implementasi penuh (mis. Wajib, minlength, pesan kesalahan saat mengirim dll). Safari masih tidak sepenuhnya mendukung bahkan atribut yang diperlukan, dan hanya Chrome dan Opera yang mendukung minLength. misalnya melihat caniuse.com/#search=required
— rmcsharry

Jawaban:

1326

Anda bisa menggunakan patternatribut . Iturequired atribut juga diperlukan, jika tidak sebuah field input dengan nilai kosong akan dikeluarkan dari validasi kendala .

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

Jika Anda ingin membuat opsi untuk menggunakan pola "kosong, atau panjang minimum", Anda bisa melakukan hal berikut:

<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)">
— pengguna123444555621
sumber
139
+1 untuk menggunakan HTML5 bukan jQuery. Saya hanya ingin menambahkan bahwa atribut title memungkinkan Anda untuk mengatur pesan untuk ditampilkan kepada pengguna jika polanya tidak terpenuhi. Kalau tidak, pesan default akan ditampilkan.
— Tidak ada
11
@ J.Money Masih berbunyi "Harap cocok dengan format yang diminta: <title>". Apakah ada cara untuk mem-bypass pesan default sebelumnya?
— CᴴᴀZ
59
Sayangnya ini tidak didukung untuk textareas .
— ThiefMaster
27
@ChaZ @Basj Anda dapat menambahkan pesan kesalahan khusus dengan menambahkan atribut berikut:oninvalid="this.setCustomValidity('Your message')"
— bigtex777
6
Jika Anda memasukkan input yang tidak valid dan Anda menggunakan setCustomValidity, maka itu akan terus menunjukkan kepada Anda pesan kesalahan bahkan setelah Anda mengoreksi input. Anda dapat menggunakan onchangemetode berikut untuk mengatasi ini. oninvalid="this.setCustomValidity('Field must contain min. 5 characters')" onchange="try{setCustomValidity('')}catch(e){}"
— sohaiby
154

Ada adalah sebuah minlengthproperti di HTML5 spesifikasi sekarang, serta validity.tooShortantarmuka.

Keduanya sekarang diaktifkan di versi terbaru dari semua browser modern. Untuk detailnya, lihat https://caniuse.com/#search=minlength .

— rhgb
sumber
1
Firefox 44 dan masih belum diterapkan.
— Christian Læirbag
2
Masih tidak didukung di luar Chrome atau Opera. caniuse.com/#search=minlength
— rmcsharry
Ini Januari 2017 dan masih hanya Chrome dan Opera yang mendukung minlength
— TrojanName
2
@TrojanName Firefox mendukung minlengthatribut sejak versi 51 .
— Luca Detomi
16
Komentar periodik untuk memperbarui status pada jawaban Stack Overflow ini kurang berguna daripada memberitahu orang-orang untuk memeriksa di sini untuk informasi saat ini: caniuse.com/#search=minlength
— chadoh
19

Berikut ini adalah solusi khusus HTML5 (jika Anda ingin minlength 5, maxlength 10 karakter validation)

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

<form>
  <input pattern=".{5,10}">
  <input type="submit" value="Check"></input>
</form>
— Ali Çarıkçıoğlu
sumber
3
Bagaimana cara mengatur pesan kesalahan khusus jika bidang tidak ok?
— Basj
2
Untuk pesan khusus, tambahkan titleatribut dengan pesan yang diperlukan.
— Shlomi Hassid
8
patternJawaban yang sama telah diberikan beberapa bulan sebelumnya . Bagaimana jawaban ini lebih baik?
— Dan Dascalescu
@DanDascalescu Dia tidak memiliki tag formulir dan penjelasan yang jelas. Saya juga menyertakan demo jsfiddle yang berfungsi. (Aturan Stackoverflow btw mengatakan bahwa itu tidak dilarang untuk memberikan jawaban yang sama asalkan itu membantu masyarakat)
— Ali Çarıkçıoğlu
Salah satu cara untuk memberikan jawaban yang lebih baik adalah dengan memasukkan demo di sini di SO sebagai potongan kode yang dapat dijalankan .
— Dan Dascalescu
8

Saya menggunakan maxlength dan minlength dengan atau tanpa requireddan itu bekerja dengan baik untuk HTML5.

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

`

— benaff033
sumber
6

Atribut minLength (tidak seperti maxLength) tidak ada secara native di HTML5. Namun ada beberapa cara untuk memvalidasi bidang jika isinya kurang dari x karakter.

Contoh diberikan menggunakan jQuery di tautan ini: 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>
— Valéry Stroeder
sumber
1
"atribut MINLENGTH (tidak seperti maxlength) tidak ada native di HTML5" Ya memang: w3.org/TR/html5/...
— mikemaccana
Masih tidak didukung di luar Chrome atau Opera. caniuse.com/#search=minlength
— rmcsharry
4

Solusi saya untuk textarea menggunakan jQuery dan menggabungkan HTML5 diperlukan validasi untuk memeriksa panjang minimum.

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

HTML

<form action="">
  <textarea name="test_min_length" id="" cols="30" rows="10" minlength="10"></textarea>
</form>
— Hiep Dinh
sumber
Jawaban yang sangat berguna dan elegan!
— Silvio Delgado
4

minlengthatribut sekarang banyak didukung di sebagian besar browser .

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

Tapi, seperti fitur HTML5 lainnya, IE11 tidak ada dalam panorama ini. Jadi, jika Anda memiliki basis pengguna IE11 yang luas, pertimbangkan untuk menggunakan patternatribut HTML5 yang didukung hampir di seluruh papan di sebagian besar browser (termasuk IE11).

Untuk memiliki implementasi yang bagus dan seragam dan mungkin dapat dikembangkan atau dinamis (berdasarkan kerangka kerja yang menghasilkan HTML Anda), saya akan memilih patternatribut:

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

Masih ada sedikit kegunaan menangkap saat menggunakan pattern. Pengguna akan melihat pesan kesalahan / peringatan non-intuitif (sangat umum) saat menggunakan pattern. Lihat jsfiddle ini atau di bawah ini:

<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>
Luaskan cuplikan

Misalnya, di Chrome (tetapi serupa di sebagian besar browser), Anda akan mendapatkan pesan kesalahan berikut:

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

dengan menggunakan minlengthdan

Please match the format requested

dengan menggunakan pattern.

— Gabriel Petrovay
sumber
2

Versi baru:

Itu memperluas penggunaan (textarea dan input) dan memperbaiki bug.

// 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);
        }
    }
}
— Carlos Machado
sumber
Terima kasih atas solusi elegan yang diperbarui ini. Apakah ini berfungsi di luar Chrome / Opera karena tidak mendukung minlength? caniuse.com/#search=minlength Saya baru saja mengujinya di Mac Safari dan tidak berfungsi :( Saya melihat Anda menambahkan eventListener untuk browser non Chrome / Opera, jadi mungkin saya melakukan sesuatu yang salah.
— rmcsharry
Setelah men-debug Safari, tampaknya var items = this.elements; mengembalikan koleksi FORMS, bukan item dalam formulir. Aneh.
— rmcsharry
2

Saya perhatikan bahwa kadang-kadang di chrome ketika pengisian otomatis aktif dan bidang adalah bidang dengan metode pembuatan browser autofill, ia memotong aturan validasi minlength, jadi dalam hal ini Anda harus menonaktifkan pengisian otomatis dengan atribut berikut:

autocomplete = "off" 

<input autocomplete="new-password" name="password" id="password" type="password" placeholder="Password" maxlength="12" minlength="6" required />
— taliboni
sumber
Ini bukan tentang bidang kata sandi.
— Igor Popov
ini tentang input HTML, kata sandi memang input HTML.
— talsibony
2

Lihat http://caniuse.com/#search=minlength , beberapa browser mungkin tidak mendukung atribut ini.

Jika nilai "tipe" adalah salah satunya:

teks, email, pencarian, kata sandi, tel, atau url (peringatan: tidak termasuk nomor | tidak ada browser yang mendukung "tel" sekarang - 2017.10)

menggunakan atribut minlength (/ maxlength), itu menentukan jumlah karakter minimum.

misalnya.

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

atau gunakan atribut "pola":

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

Jika "type" adalah angka , meskipun panjang minthougth (/ maxlength) tidak didukung, Anda dapat menggunakan min atribut (/ max) sebagai gantinya.

misalnya.

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

Saya menulis kode JavaScript ini, [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);
    }
}
— Carlos Machado
sumber
1

Jika ingin membuat perilaku ini,
selalu tampilkan awalan kecil pada bidang input atau pengguna tidak dapat menghapus awalan :

   //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;
— Carlos Rafael
sumber
1

Saya menggunakan max dan min kemudian diperlukan dan itu bekerja untuk saya dengan sangat baik, tetapi apa yang saya tidak yakin adalah metode coding. Saya harap ini membantu

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

Dalam kasus saya, di mana saya memvalidasi yang paling manual dan menggunakan Firefox (43.0.4), minlengthdan validity.tooShortsayangnya tidak tersedia.

Karena saya hanya perlu menyimpan panjang minimum untuk melanjutkan, cara yang mudah dan praktis adalah dengan menetapkan nilai ini ke atribut valid lainnya dari tag input. Dalam hal itu, Anda dapat menggunakan min, maxdan stepproperti dari [type = "angka"] input.

Daripada menyimpan batas-batas itu dalam array, lebih mudah menemukannya disimpan dalam input yang sama daripada mendapatkan id elemen yang cocok dengan indeks array.

— Christian Læirbag
sumber
-4

Tambahkan nilai maks dan min. Anda dapat menentukan rentang nilai yang diizinkan:

<input type="number" min="1" max="999" />
— Deepti Gehlot
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.