Gibt es in HTML5 ein Validierungsattribut für die Mindestlänge?

608

Es scheint, dass das minlengthAttribut für ein <input>Feld nicht funktioniert.

Gibt es ein anderes Attribut in HTML5, mit dessen Hilfe ich die minimale Länge eines Werts für Felder festlegen kann?

html  html5-validation 
— Emilan
quelle
3
Es ist nicht die Antwort für jedes Feld, aber wenn Sie nur sicherstellen möchten, dass ein Wert vorhanden ist, können Sie das Attribut "erforderlich" verwenden. <input type = "text" name = "input1" required = "required" />
— Keine
1
— Web_Designer
7
Es existiert nicht, aber lasst uns viel Aufhebens machen und es rein! w3.org/Bugs/Public/show_bug.cgi?id=20557
— Eric Elliott
Sie müssen JS / Jquery verwenden, wenn Sie eine vollständige Implementierung durchführen möchten (z. B. erforderlich, Länge, Fehlermeldung beim Senden usw.). Safari unterstützt immer noch nicht einmal das erforderliche Attribut vollständig und nur Chrome und Opera unterstützen minLength. zB siehe caniuse.com/#search=required
— rmcsharry

Antworten:

1326

Sie können das patternAttribut verwenden . Das requiredAttribut wird ebenfalls benötigt, andernfalls wird ein Eingabefeld mit einem leeren Wert von der Einschränkungsüberprüfung ausgeschlossen .

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

Wenn Sie die Option erstellen möchten, das Muster für "leer oder Mindestlänge" zu verwenden, können Sie Folgendes tun:

<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
quelle
139
+1 für die Verwendung von HTML5 anstelle von jQuery. Ich wollte nur hinzufügen, dass Sie mit dem title-Attribut festlegen können, dass die Nachricht dem Benutzer angezeigt wird, wenn das Muster nicht erfüllt ist. Andernfalls wird eine Standardmeldung angezeigt.
— Keine
11
@ J.Money Es steht immer noch "Bitte stimmen Sie mit dem gewünschten Format überein: <title>". Gibt es eine Möglichkeit, die vorherige Standardnachricht zu umgehen?
— CᴴᴀZ
59
Leider wird dies für Textbereiche nicht unterstützt .
— ThiefMaster
27
@ChaZ @Basj Sie können eine benutzerdefinierte Fehlermeldung hinzufügen, indem Sie das folgende Attribut hinzufügen:oninvalid="this.setCustomValidity('Your message')"
— bigtex777
6
Wenn Sie eine ungültige Eingabe eingeben und diese verwenden setCustomValidity, wird die Fehlermeldung auch dann angezeigt, wenn Sie die Eingabe korrigiert haben. Sie können die folgende onchangeMethode verwenden, um dem entgegenzuwirken. oninvalid="this.setCustomValidity('Field must contain min. 5 characters')" onchange="try{setCustomValidity('')}catch(e){}"
— Sohaiby
154

Es ist eine minlengthEigenschaft in HTML5 - Spezifikation jetzt, sowie die validity.tooShortSchnittstelle.

Beide sind jetzt in neueren Versionen aller modernen Browser aktiviert. Weitere Informationen finden Sie unter https://caniuse.com/#search=minlength .

— rhgb
quelle
1
Firefox 44 und noch nicht implementiert.
— Christian Læirbag
2
Wird außerhalb von Chrome oder Opera immer noch nicht unterstützt. caniuse.com/#search=minlength
— rmcsharry
Es ist Januar 2017 und immer noch unterstützen nur Chrome und Opera die Mindestlänge
— TrojanName
2
@TrojanName Firefox unterstützt minlengthAttribute seit Version 51 .
— Luca Detomi
16
Regelmäßige Kommentare zum Aktualisieren des Status dieser Stapelüberlauf-Antwort sind weniger nützlich, als die Leute zu bitten
— chadoh
19

Hier ist eine reine HTML5-Lösung (wenn Sie eine Validierung mit einer Länge von 5 und einer maximalen Länge von 10 Zeichen wünschen)

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

<form>
  <input pattern=".{5,10}">
  <input type="submit" value="Check"></input>
</form>
— Ali Çarıkçıoğlu
quelle
3
Wie setze ich eine benutzerdefinierte Fehlermeldung, wenn das Feld nicht in Ordnung ist?
— Basj
2
Fügen Sie für benutzerdefinierte Nachrichten ein titleAttribut mit der erforderlichen Nachricht hinzu.
— Shlomi Hassid
8
Die gleiche patternAntwort wurde einige Monate zuvor gegeben . Wie ist diese Antwort besser?
— Dan Dascalescu
@ DanDascalescu Er hatte keine Formular-Tags und keine klare Erklärung. Ich habe auch eine funktionierende jsfiddle-Demo beigefügt. (Übrigens besagen die Stackoverflow-Regeln, dass es nicht verboten ist, ähnliche Antworten zu geben, solange dies für die Community hilfreich ist.)
— Ali Çarıkçıoğlu
Eine Möglichkeit, eine noch bessere Antwort zu geben, besteht darin, die Demo hier auf SO als ausführbares Code-Snippet aufzunehmen .
— Dan Dascalescu
8

Ich habe Maxlength und Minlength mit oder ohne verwendet requiredund es hat bei HTML5 sehr gut funktioniert.

<input id="passcode" type="password" minlength="8" maxlength="10">
Erweitern Sie das Snippet

`

— benaff033
quelle
6

Das minLength-Attribut (im Gegensatz zu maxLength) ist in HTML5 nicht nativ vorhanden. Es gibt jedoch einige Möglichkeiten, ein Feld zu überprüfen, wenn es weniger als x Zeichen enthält.

Ein Beispiel wird mit jQuery unter diesem Link gegeben: 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
quelle
1
"minLength Attribut (im Gegensatz zu maxLength) existiert nicht nativ in HTML5" Ja, es tut: w3.org/TR/html5/…
— mikemaccana
Wird außerhalb von Chrome oder Opera immer noch nicht unterstützt. caniuse.com/#search=minlength
— rmcsharry
5

Nicht HTML5, aber trotzdem praktisch: Wenn Sie AngularJS verwenden , können Sie es sowohl ng-minlengthfür Eingaben als auch für Textbereiche verwenden. Siehe auch diesen Plunk .

— mik01aj
quelle
Wenn Angular so geschrieben worden wäre, dass es Standards entspricht , hätten sie beispielsweise Folgendes verwendet, data-ng-minlengthaber warum sollte sich ein Entwickler für Standards interessieren? > __>
— John
4
Liebe Standard - Folger, können Sie verwenden data-ng-minlengthauch .
— Mik01aj
4

Meine Lösung für Textbereiche mit jQuery und der Kombination von HTML5 erforderte eine Validierung, um die Mindestlänge zu überprüfen.

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
quelle
Sehr nützliche und elegante Antwort!
— Silvio Delgado
4

minlengthDas Attribut wird mittlerweile in den meisten Browsern weitgehend unterstützt .

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

Aber wie bei anderen HTML5-Funktionen fehlt IE11 in diesem Panorama. Wenn Sie also eine breite IE11-Benutzerbasis haben, sollten Sie das patternHTML5-Attribut verwenden, das in den meisten Browsern (einschließlich IE11) fast überall unterstützt wird .

Um eine schöne und einheitliche Implementierung zu haben und möglicherweise erweiterbar oder dynamisch (basierend auf dem Framework, das Ihren HTML-Code generiert), würde ich für das patternAttribut stimmen :

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

Es gibt immer noch einen kleinen Usability-Haken bei der Verwendung pattern. Der Benutzer sieht bei der Verwendung eine nicht intuitive (sehr allgemeine) Fehler- / Warnmeldung pattern. Siehe diese jsfiddle oder unten:

<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>
Erweitern Sie das Snippet

In Chrome (aber in den meisten Browsern ähnlich) werden beispielsweise die folgenden Fehlermeldungen angezeigt:

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

mit minlengthund

Please match the format requested

mit pattern.

— Gabriel Petrovay
quelle
2

Neue Version:

Es erweitert die Verwendung (Textbereich und Eingabe) und behebt Fehler.

// 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
quelle
Vielen Dank für diese elegante aktualisierte Lösung. Funktioniert es außerhalb von Chrome / Opera, da es keine Minlength unterstützt? caniuse.com/#search=minlength Ich habe es gerade auf Mac Safari getestet und es funktioniert nicht :( Ich sehe, dass Sie den eventListener für Nicht-Chrome / Opera-Browser hinzufügen, also mache ich vielleicht etwas falsch.
— rmcsharry
Nach dem Debuggen von Safari scheint var items = this.elements; gibt die FORMS-Sammlung zurück, nicht die Elemente im Formular. Seltsam.
— rmcsharry
2

Ich stelle fest, dass in Chrome manchmal, wenn das automatische Ausfüllen aktiviert ist und die Felder von der eingebauten Methode des automatischen Füllbrowsers Feld sind, die Validierungsregeln für die Mindestlänge umgangen werden. In diesem Fall müssen Sie das automatische Ausfüllen durch das folgende Attribut deaktivieren:

autocomplete = "aus" 

<input autocomplete="new-password" name="password" id="password" type="password" placeholder="Password" maxlength="12" minlength="6" required />
— Talsibony
quelle
Hier geht es nicht um Passwortfelder.
— Igor Popov
Es geht um HTML-Eingabe, Passwort ist in der Tat HTML-Eingabe.
— Talsibony
2

Siehe http://caniuse.com/#search=minlength . Einige Browser unterstützen dieses Attribut möglicherweise nicht.

Wenn der Wert des "Typs" einer von ihnen ist:

Text, E-Mail, Suche, Passwort, Telefon oder URL (Warnung: Nummer nicht angeben | Keine Browserunterstützung "Tel" jetzt - 2017.10)

Verwenden Sie das Attribut minlength (/ maxlength), um die Mindestanzahl von Zeichen anzugeben.

z.B.

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

oder verwenden Sie das Attribut "Muster":

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

Wenn der "Typ" eine Zahl ist und die minimale Länge (/ maxlength) nicht unterstützt wird, können Sie min verwenden stattdessen das Attribut (/ max) verwenden.

z.B.

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

Ich habe diesen JavaScript-Code [minlength.js] geschrieben:

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
quelle
1

Wenn Sie dieses Verhalten ausführen möchten, zeigen Sie
immer ein kleines Präfix im Eingabefeld an, oder der Benutzer kann ein Präfix nicht löschen :

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

Ich habe dann Max und Min verwendet und es hat bei mir sehr gut funktioniert, aber ich bin mir nicht sicher, ob es sich um eine Codierungsmethode handelt. Ich hoffe, es hilft

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

In meinem Fall, in dem ich am meisten manuell und mit Firefox (43.0.4) validiere minlengthund validity.tooShortleider nicht verfügbar bin .

Da ich nur minimale Längen speichern muss, um fortzufahren, besteht eine einfache und praktische Möglichkeit darin, diesen Wert einem anderen gültigen Attribut des Eingabe-Tags zuzuweisen. In diesem Fall ist, dann können Sie verwenden min, maxundstep Eigenschaften von [type = „Anzahl“] Eingänge.

Anstatt diese Grenzwerte in einem Array zu speichern, ist es einfacher, sie in derselben Eingabe zu finden, als die Element-ID so abzurufen, dass sie mit dem Array-Index übereinstimmt.

— Christian Læirbag
quelle
-4

Fügen Sie sowohl einen Max- als auch einen Min-Wert hinzu. Sie können den Bereich der zulässigen Werte angeben:

<input type="number" min="1" max="999" />
— Deepti Gehlot
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.