Esiste un attributo di validazione minlength in HTML5?

Sembra che l’attributo minlength per un campo non funzioni.

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

Puoi usare l’ attributo pattern . È required attributo richiesto, altrimenti un campo di input con un valore vuoto verrà escluso dalla convalida del vincolo .

   

Se si desidera creare l’opzione per utilizzare il modello per “vuoto o lunghezza minima”, è ansible effettuare le seguenti operazioni:

   

Esiste ora una proprietà minlength nelle specifiche HTML5 e l’interfaccia validity.tooShort .

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

Ecco la soluzione solo HTML5 (se si desidera la convalida di minlength 5, maxlength 10)

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

 

Sì, eccolo. È come la lunghezza massima. Documentazione W3.org: http://www.w3.org/TR/html5/forms.html#attr-fe-minlength

Nel caso in cui la minlength non funzioni, usa l’attributo pattern come indicato da @ Pumbaa80 per il tag di input .

Per textarea: per l’impostazione di max; usa maxlength e per min vai a questo link .

Troverete qui sia per il massimo che per il minimo.

Non HTML5, ma comunque pratico: se usi AngularJS , puoi usare ng-minlength sia per gli input che per i textareas. Vedi anche questo Plunk .

L’attributo minLength (a differenza di maxLength) non esiste in modo nativo in HTML5. Tuttavia ci sono alcuni modi per convalidare un campo se contiene meno di x caratteri.

Un esempio è dato usando jQuery a questo link: http://docs.jquery.com/Plugins/Validation/Methods/minlength

         

La mia soluzione per textarea che utilizza jQuery e che combina HTML5 richiede 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

 

Nuova versione:

Estende l’uso (textarea e input) e corregge 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); } } } 

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


Se il valore del “tipo” è uno di questi:

testo, email, ricerca, password, tel o url (avviso: non includere numero | nessun supporto browser “tel” ora – 2017.10)

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

per esempio.

  

oppure usa l’attributo “modello”:

  

Se il “tipo” è il numero , non è supportata anche la lunghezza minima (/ max. Lunghezza), è invece ansible utilizzare l’attributo min (/ max).

per esempio.

  

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

Nel mio caso, in cui convalido di più a portata di mano e utilizzando Firefox (43.0.4), minlength e validity.tooShort non sono purtroppo disponibili.

Ma dal momento che ho solo bisogno di avere lunghezze minime memorizzate per procedere, un modo semplice e pratico è di assegnare questo valore ad un altro attributo valido del tag di input. In tal caso, quindi, è ansible utilizzare min , max e step di altri correttamente da input di tipo non di testo (type = “number”), ma ancora input.

Anziché archiviare tali limiti in un array, è più semplice trovarlo memorizzato nello stesso input anziché ottenere l’id dell’elemento in modo che corrisponda all’indice dell’array.

Ho notato che a volte in chrome quando la compilazione automatica è triggers e i campi sono campi in base al metodo di compilazione del browser di compilazione automatica, ignorano le regole di convalida minlength, quindi in questo caso dovrai distriggersre l’autofill dal seguente attributo:

autocomplete = “off”

  

Se desideri fare questo comportamento,
mostra sempre un piccolo prefisso sul campo di inserimento 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; 

Ho usato max e min poi richiesto e ha funzionato molto bene per me, ma quello che non sono sicuro è se è un metodo di codifica. spero possa essere d’aiuto

  

Aggiungi sia un valore max che un valore minimo puoi specificare l’intervallo di valori consentiti: