Czy w HTML5 jest atrybut walidacji długości minimalnej?

608

Wygląda na to, że minlengthatrybut <input>pola nie działa.

Czy jest jakiś inny atrybut w HTML5, za pomocą którego mogę ustawić minimalną długość wartości dla pól?

html html5-validation

— emilan
źródło

3

Nie będzie to odpowiedź na każde pole, ale jeśli chcesz się tylko upewnić, że istnieje tam wartość, możesz użyć atrybutu „wymagany”. <input type = „text” name = „input1” wymagany = „wymagany” />

— Brak

1

Możliwy duplikat: stackoverflow.com/questions/5533053/textarea-character-limit/…

— Web_Designer

7

Nie istnieje, ale zróbmy zamieszanie i włączmy to! w3.org/Bugs/Public/show_bug.cgi?id=20557

— Eric Elliott

Musisz użyć JS / Jquery, jeśli chcesz wykonać pełną implementację (np. Wymagane, minlength, komunikat o błędzie podczas przesyłania itp.). Safari nadal nie w pełni obsługuje nawet wymagany atrybut, a tylko Chrome i Opera obsługują minLength. np. patrz caniuse.com/#search=required

— rmcsharry

1326

Możesz użyć patternatrybutu . requiredAtrybut również konieczna jest, w przeciwnym razie pole wejściowe z pustym wartości zostaną wykluczeni z więzów walidacji .

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

Jeśli chcesz utworzyć opcję używania wzorca dla „pustej lub minimalnej długości”, możesz wykonać następujące czynności:

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

— użytkownik123444555621
źródło

139

+1 za użycie html5 zamiast jQuery. Chciałem tylko dodać, że atrybut title pozwala ustawić komunikat, który będzie wyświetlany użytkownikowi, jeśli wzorzec nie zostanie spełniony. W przeciwnym razie zostanie wyświetlony komunikat domyślny.

— Brak,

11

@ J.Money Nadal mówi „Proszę dopasować żądany format: <title>”. Czy istnieje sposób na ominięcie poprzedniej domyślnej wiadomości?

— CᴴᴀZ

59

Niestety nie jest to obsługiwane w obszarach tekstowych .

— ThiefMaster

27

@ChaZ @Basj Możesz dodać niestandardowy komunikat o błędzie, dodając następujący atrybut:oninvalid="this.setCustomValidity('Your message')"

— bigtex777,

6

Jeśli wpiszesz niepoprawne dane wejściowe i używasz setCustomValidity, będzie nadal wyświetlać komunikat o błędzie, nawet po poprawieniu danych wejściowych. Możesz użyć następującej onchangemetody, aby temu zaradzić. oninvalid="this.setCustomValidity('Field must contain min. 5 characters')" onchange="try{setCustomValidity('')}catch(e){}"

— sohaiby

154

Nie jestminlength nieruchomość w HTML5 Spec teraz, jak również validity.tooShortinterfejs.

Oba są teraz włączone w najnowszych wersjach wszystkich nowoczesnych przeglądarek. Aby uzyskać szczegółowe informacje, zobacz https://caniuse.com/#search=minlength .

— rhgb
źródło

1

Firefox 44 i wciąż nie zaimplementowany.

— Christian Læirbag

2

Nadal nie jest obsługiwany poza Chrome lub Operą. caniuse.com/#search=minlength

— rmcsharry 13.10.16

Jest styczeń 2017 r. I wciąż tylko minimalna długość wsparcia dla Chrome i Opery

— TrojanName

2

@TrojanName Firefox obsługuje minlengthatrybut od wersji 51 .

— Luca Detomi

16

Okresowe komentarze w celu aktualizacji statusu odpowiedzi na przepełnienie stosu są mniej przydatne niż zachęcanie

— chadoh

19

Oto rozwiązanie tylko dla HTML5 (jeśli chcesz sprawdzać poprawność znaków minlength 5, maxlength 10)

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

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

— Ali Çarıkçıoğlu
źródło

3

Jak ustawić niestandardowy komunikat o błędzie, jeśli pole nie jest w porządku?

— Basj

2

W przypadku wiadomości niestandardowej dodaj titleatrybut z wymaganą wiadomością.

— Shlomi Hassid

8

Ta sama patternodpowiedź została udzielona kilka miesięcy wcześniej . Jak ta odpowiedź jest lepsza?

— Dan Dascalescu

@DanDascalescu Nie miał tagów i jasnego wyjaśnienia. Dołączyłem również działające demo jsfiddle. (btw Zasady Stackoverflow mówią, że udzielanie podobnych odpowiedzi nie jest zabronione, o ile jest to pomocne dla społeczności)

— Ali Çarıkçıoğlu

Jednym ze sposobów udzielenia jeszcze lepszej odpowiedzi jest włączenie wersji demonstracyjnej tutaj na SO jako fragmentu kodu, który można uruchomić .

— Dan Dascalescu

11

Tak jest. To jest jak maksymalna długość. Dokumentacja W3.org: http://www.w3.org/TR/html5/forms.html#attr-fe-minlength

W przypadku, minlengthgdy nie działa, użyj patterndla inputtagu atrybutu wspomnianego przez @ Pumbaa80 .

Dla obszaru tekstowego: dla ustawienia maks .; użyj maxlengthi przez min przejdź do tego linku .

Znajdziesz tutaj zarówno dla maks., Jak i min.

— SohelAhmedM
źródło

8

Użyłem maxlength i minlength z lub bez requiredi działało to bardzo dobrze dla HTML5.

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

Rozwiń fragment kodu

`

— benaff033
źródło

6

Atrybut minLength (w przeciwieństwie do maxLength) nie istnieje natywnie w HTML5. Istnieją jednak sposoby sprawdzania poprawności pola, jeśli zawiera mniej niż x znaków.

Przykład podano za pomocą jQuery pod tym linkiem: 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
źródło

1

„Atrybut minLength (w przeciwieństwie do maxLength) nie istnieje natywnie w HTML5” Tak, to: w3.org/TR/html5/…

— mikemaccana

Nadal nie jest obsługiwany poza Chrome lub Operą. caniuse.com/#search=minlength

— rmcsharry 13.10.16

5

Nie HTML5, ale i tak praktyczne: jeśli używasz AngularJS , możesz używać go ng-minlengthzarówno do wprowadzania, jak i do obszarów tekstowych. Zobacz także ten Plunk .

— mik01aj
źródło

Gdyby Angular został napisany jako zgodny ze standardami , użyłby czegoś takiego, data-ng-minlengthale dlaczego deweloper miałby dbać o standardy? > __>

— Jan

4

Drogi średnia naśladowcą, można użyć data-ng-minlengthrównież .

— mik01aj

4

Moje rozwiązanie dla obszaru tekstowego za pomocą jQuery i połączenia HTML5 wymagało sprawdzenia poprawności w celu sprawdzenia minimalnej długości.

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
źródło

Bardzo przydatna i elegancka odpowiedź!

— Silvio Delgado

4

minlengthatrybut jest obecnie szeroko obsługiwany w większości przeglądarek .

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

Ale, podobnie jak w przypadku innych funkcji HTML5, w tej panoramie brakuje IE11. Tak więc, jeśli masz szeroką bazę użytkowników IE11, rozważ użycie patternatrybutu HTML5, który jest obsługiwany prawie we wszystkich przeglądarkach (w tym IE11).

Aby mieć ładną i jednolitą implementację oraz być może rozszerzalną lub dynamiczną (na podstawie frameworku, który generuje Twój HTML), głosowałbym na patternatrybut:

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

Jest jeszcze mały haczyk użyteczność podczas używania pattern. Podczas używania użytkownik zobaczy nieintuicyjny (bardzo ogólny) komunikat o błędzie / ostrzeżeniu pattern. Zobacz to jsfiddle lub poniżej:

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

Rozwiń fragment kodu

Na przykład w Chrome (ale podobnie w większości przeglądarek) otrzymasz następujące komunikaty o błędach:

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

za pomocą minlengthi

Please match the format requested

za pomocą pattern.

— Gabriel Petrovay
źródło

2

Nowa wersja:

Rozszerza użycie (textarea i input) i naprawia błędy.

// 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
źródło

Dzięki za to eleganckie zaktualizowane rozwiązanie. Czy działa poza Chrome / Opera, ponieważ nie obsługuje minlength? caniuse.com/#search=minlength Właśnie przetestowałem to na Mac Safari i nie działa :( Widzę, że dodajesz eventListener dla przeglądarek innych niż Chrome / Opera, więc może robię coś złego.

— rmcsharry

Po debugowaniu Safari wydaje się, że var items = this.elements; zwraca kolekcję FORMS, a nie elementy w formularzu. Dziwne.

— rmcsharry

2

Zauważam, że czasami w chrome, gdy autouzupełnianie jest włączone, a pola są zgodne z metodą wbudowanej przeglądarki autouzupełniania, omija reguły sprawdzania poprawności minimalnej długości, więc w takim przypadku będziesz musiał wyłączyć autouzupełnianie za pomocą następującego atrybutu:

autocomplete = "wyłączony"

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

— talsibony
źródło

Tu nie chodzi o pola hasła.

— Igor Popov,

chodzi o wprowadzanie HTML, hasło jest rzeczywiście wprowadzaniem HTML.

— talsibony

2

Zobacz http://caniuse.com/#search=minlength , niektóre przeglądarki mogą nie obsługiwać tego atrybutu.

Jeśli wartość „typu” jest jedną z nich:

tekst, e-mail, wyszukiwanie, hasło, tel lub adres URL (ostrzeżenie: nie zawiera numeru | brak obsługi przeglądarki „tel” teraz - 2017.10)

użyj atrybutu minlength (/ maxlength), określa minimalną liczbę znaków.

na przykład.

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

lub użyj atrybutu „wzorzec”:

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

Jeśli „typ” jest liczbą , mimo że minlength (/ maxlength) nie jest obsługiwany, możesz zamiast tego użyć atrybutu min (/ max).

na przykład.

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

— levinit
źródło

1

Napisałem ten kod 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
źródło

1

Jeśli pragnienie, aby ten problem,
zawsze wykazują niewielką prefiks na polu wejściowym lub użytkownik nie może usunąć prefiks :

   //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
źródło

1

Użyłem wtedy wymaganych wartości max i min i działało to dla mnie bardzo dobrze, ale nie jestem pewien, czy jest to metoda kodowania. Mam nadzieję, że to pomoże

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

— Humphrey
źródło

1

W moim przypadku, w którym sprawdzam najbardziej ręcznie i za pomocą przeglądarki Firefox (43.0.4) minlengthi validity.tooShortniestety nie są dostępne.

Ponieważ do kontynuowania muszę mieć tylko zachowane minimalne długości, łatwym i wygodnym sposobem jest przypisanie tej wartości do innego ważnego atrybutu znacznika wejściowego. W takim przypadku Następnie można użyć min, maxoraz stepwłaściwości z [type = „number”] wejść.

Zamiast przechowywać te ograniczenia w tablicy, łatwiej jest znaleźć ją zapisaną na tym samym wejściu, niż uzyskać identyfikator elementu zgodny z indeksem tablicy.

— Christian Læirbag
źródło

-4

Dodaj wartość maksymalną i minimalną, możesz określić zakres dozwolonych wartości:

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

— Deepti Gehlot
źródło