Esiste un attributo di convalida di lunghezza minima in HTML5?

608

Sembra che l' minlengthattributo per un <input>campo non funzioni.

C'è qualche altro attributo in HTML5 con l'aiuto del quale posso impostare la lunghezza minima di un valore per i campi?

html  html5-validation 
— emilan
fonte
3
Non sarà la risposta per ogni campo, ma se vuoi solo assicurarti che ci sia un valore puoi usare l'attributo "richiesto". <input type = "text" name = "input1" richiesto = "richiesto" />
— Nessuno
1
— Web_Designer
7
Non esiste, ma facciamo un polverone e facciamolo entrare! w3.org/Bugs/Public/show_bug.cgi?id=20557
— Eric Elliott
È necessario utilizzare JS / Jquery se si desidera eseguire un'implementazione completa (ad es. Richiesto, lunghezza minima, messaggio di errore durante l'invio, ecc.). Safari non supporta ancora completamente l'attributo richiesto e solo Chrome e Opera supportano minLength. ad es. vedi caniuse.com/#search=required
— rmcsharry

Risposte:

1326

Puoi usare l' patternattributo . È necessario anche l' requiredattributo , altrimenti un campo di input con un valore vuoto verrà escluso dalla convalida del vincolo .

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

Se si desidera creare l'opzione per utilizzare il modello per "lunghezza vuota o minima", è possibile effettuare le seguenti operazioni:

<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)">
— user123444555621
fonte
139
+1 per l'utilizzo di html5 invece di jQuery. Volevo solo aggiungere che l'attributo title ti consente di impostare il messaggio da mostrare all'utente se il pattern non è soddisfatto. Altrimenti verrà mostrato un messaggio predefinito.
— Nessuno
11
@ J.Money Dice ancora "Abbina il formato richiesto: <title>". C'è un modo per bypassare il messaggio predefinito precedente?
— CᴴᴀZ
59
Purtroppo questo non è supportato per le textareas .
— ThiefMaster,
27
@ChaZ @Basj È possibile aggiungere un messaggio di errore personalizzato aggiungendo il seguente attributo:oninvalid="this.setCustomValidity('Your message')"
— bigtex777
6
Se inserisci un input non valido e lo stai utilizzando setCustomValidity, continuerà a mostrarti il ​​messaggio di errore anche dopo aver corretto l'input. È possibile utilizzare il seguente onchangemetodo per contrastare questo. oninvalid="this.setCustomValidity('Field must contain min. 5 characters')" onchange="try{setCustomValidity('')}catch(e){}"
— sohaiby,
154

V'è un minlengthimmobile in HTML5 spec ora, così come l' validity.tooShortinterfaccia.

Entrambi sono ora abilitati nelle versioni recenti di tutti i browser moderni. Per i dettagli, consultare https://caniuse.com/#search=minlength .

— rhgb
fonte
1
Firefox 44 e non ancora implementato.
— Christian Læirbag,
2
Ancora non supportato al di fuori di Chrome o Opera. caniuse.com/#search=minlength
— rmcsharry
È gennaio 2017 e ancora solo Chrome e Opera supportano la lunghezza minima
— TrojanName il
2
@TrojanName Firefox supporta l' minlengthattributo dalla versione 51 .
— Luca Detomi
16
I commenti periodici per aggiornare lo stato su questa risposta Stack Overflow sono meno utili che dire alle persone di controllare qui per informazioni aggiornate: caniuse.com/#search=minlength
— chadoh
19

Ecco una soluzione solo per HTML5 (se vuoi la convalida minlength 5, maxlength 10 caratteri)

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

<form>
  <input pattern=".{5,10}">
  <input type="submit" value="Check"></input>
</form>
— Ali Çarıkçıoğlu
fonte
3
Come impostare un messaggio di errore personalizzato se il campo non è OK?
— Basj,
2
Per il messaggio personalizzato aggiungere l' titleattributo con il messaggio richiesto.
— Shlomi Hassid,
8
La stessa patternrisposta è stata data alcuni mesi prima . In che modo è migliore questa risposta?
— Dan Dascalescu,
@DanDascalescu Non aveva tag del modulo e una chiara spiegazione. Ho anche incluso una demo di jsfiddle funzionante. (tra le regole StackOverflow dicono che non è vietato fornire risposte simili purché utili alla comunità)
— Ali Çarıkçıoğlu
Un modo per dare una risposta ancora migliore è includere la demo qui su SO come frammento di codice eseguibile .
— Dan Dascalescu il
8

Ho usato maxlength e minlength con o senza requirede ha funzionato molto bene per me in HTML5.

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

`

— benaff033
fonte
6

L'attributo minLength (a differenza di maxLength) non esiste nativamente in HTML5. Tuttavia, esistono alcuni modi per convalidare un campo se contiene meno di x caratteri.

Un esempio viene fornito utilizzando jQuery a questo link: 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
fonte
1
"L'attributo minLength (a differenza di maxLength) non esiste nativamente in HTML5" Sì, sì: w3.org/TR/html5/…
— mikemaccana,
Ancora non supportato al di fuori di Chrome o Opera. caniuse.com/#search=minlength
— rmcsharry
4

La mia soluzione per textarea utilizzando jQuery e combinando HTML5 ha richiesto la convalida per verificare la lunghezza minima.

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
fonte
Risposta molto utile ed elegante!
— Silvio Delgado,
4

minlengthL'attributo è ora ampiamente supportato nella maggior parte dei browser .

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

Ma, come con altre funzionalità HTML5, IE11 non è presente in questo panorama. Quindi, se disponi di una vasta base di utenti IE11, prendi in considerazione l'utilizzo patterndell'attributo HTML5 che è supportato quasi su tutta la linea nella maggior parte dei browser (incluso IE11).

Per avere un'implementazione gradevole e uniforme e forse estensibile o dinamica (basata sul framework che genera il tuo HTML), voterei per l' patternattributo:

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

C'è ancora una piccola cattura di usabilità durante l'utilizzo pattern. L'utente visualizzerà un messaggio di errore / avviso non intuitivo (molto generico) durante l'utilizzo pattern. Vedi questo jsfiddle o sotto:

<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>
Espandi frammento

Ad esempio, in Chrome (ma simile nella maggior parte dei browser), otterrai i seguenti messaggi di errore:

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

usando minlengthe

Please match the format requested

usando pattern.

— Gabriel Petrovay
fonte
2

Nuova versione:

Estende l'uso (textarea e input) e corregge i 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
fonte
Grazie per questa elegante soluzione aggiornata. Funziona al di fuori di Chrome / Opera poiché non supportano la lunghezza minima? caniuse.com/#search=minlength L' ho appena testato su Mac Safari e non funziona :( Vedo che stai aggiungendo eventListener per browser non Chrome / Opera, quindi forse sto facendo qualcosa di sbagliato.
— rmcsharry
Dopo il debug di Safari sembra che var items = this.elements; sta restituendo la raccolta FORMS, non gli articoli nel modulo. Strano.
— rmcsharry,
2

Ho notato che a volte in Chrome quando il riempimento automatico è attivo e i campi sono in campo con il metodo di compilazione del browser di riempimento automatico, ignora le regole di convalida di lunghezza minima, quindi in questo caso dovrai disabilitare il riempimento automatico con il seguente attributo:

autocomplete = "off" 

<input autocomplete="new-password" name="password" id="password" type="password" placeholder="Password" maxlength="12" minlength="6" required />
— talsibony
fonte
Non si tratta di campi password.
— Igor Popov,
si tratta di input HTML, la password è davvero input HTML.
— talsibony,
2

Vedi http://caniuse.com/#search=minlength , alcuni browser potrebbero non supportare questo attributo.

Se il valore del "tipo" è uno di questi:

SMS, e-mail, ricerca, password, tel o url (avviso: non includere il numero | nessun supporto per il browser "tel" ora - 2017.10)

usa l' attributo minlength (/ maxlength), specifica il numero minimo di caratteri.

per esempio.

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

o usa l'attributo "modello":

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

Se il "tipo" è un numero , l'althougth minlength (/ maxlength) non è supportato, è possibile utilizzare min invece l'attributo (/ max).

per esempio.

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

Ho scritto questo codice JavaScript, [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
fonte
1

Se desideri adottare questo comportamento, mostra
sempre un piccolo prefisso nel campo di input o l'utente non può cancellare un prefisso :

   //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
fonte
1

Ho usato max e min quindi richiesto e ha funzionato molto bene per me, ma ciò che non sono sicuro è se si tratta di un metodo ma di codifica. spero possa essere d'aiuto

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

Nel mio caso, in cui convalido il più manualmente e utilizzando Firefox (43.0.4), minlengthe validity.tooShortpurtroppo non sono disponibili.

Dal momento che ho solo bisogno di avere lunghezze minime memorizzate per procedere, un modo semplice e pratico è quello di assegnare questo valore a un altro attributo valido del tag di input. In tal caso, quindi, è possibile utilizzare min, maxe le stepproprietà dagli input [type = "number"].

Piuttosto che archiviare tali limiti in un array, è più facile trovarlo memorizzato nello stesso input invece di far corrispondere l'id dell'elemento all'indice dell'array.

— Christian Læirbag
fonte
-4

Aggiungi un valore massimo e uno minimo per specificare l'intervallo di valori consentiti:

<input type="number" min="1" max="999" />
— Deepti Gehlot
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.