Existe um atributo de validação minlength no HTML5?

608

Parece que o minlengthatributo para um <input>campo não funciona.

Existe algum outro atributo no HTML5 com a ajuda do qual posso definir o tamanho mínimo de um valor para os campos?

html  html5-validation 
— emilan
fonte
3
Não será a resposta para todos os campos, mas se você quiser apenas garantir que haja um valor, poderá usar o atributo "obrigatório". <input type = "text" name = "input1" required = "required" />
— Nenhum
1
— Web_Designer
7
Não existe, mas vamos fazer um barulho e entrar! w3.org/Bugs/Public/show_bug.cgi?id=20557
— Eric Elliott
Você precisa usar o JS / Jquery se quiser executar uma implementação completa (por exemplo, requerido, comprimento mínimo, mensagem de erro ao enviar etc). O Safari ainda não oferece suporte completo nem ao atributo necessário, e apenas o Chrome e o Opera suportam minLength. por exemplo, veja caniuse.com/#search=required
— rmcsharry

Respostas:

1326

Você pode usar o patternatributo . O requiredatributo também é necessário, caso contrário, um campo de entrada com um valor vazio será excluído da validação de restrição .

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

Se você deseja criar a opção de usar o padrão para "comprimento vazio ou mínimo", faça o seguinte:

<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 por usar html5 em vez de jQuery. Eu só queria acrescentar que o atributo title permite que você defina a mensagem a ser exibida para o usuário se o padrão não for atendido. Caso contrário, uma mensagem padrão será mostrada.
— Nenhum
11
@ J.Money Ainda diz "Por favor, corresponda ao formato solicitado: <title>". Existe uma maneira de ignorar a mensagem padrão anterior?
— CᴴᴀZ
59
Infelizmente, isso não é suportado em áreas de texto .
— ThiefMaster
27
@ChaZ @Basj Você pode adicionar uma mensagem de erro personalizada adicionando o seguinte atributo:oninvalid="this.setCustomValidity('Your message')"
— bigtex777
6
Se você digitar uma entrada inválida e estiver usando setCustomValidity, ela continuará mostrando a mensagem de erro, mesmo após a correção. Você pode usar o seguinte onchangemétodo para combater isso. oninvalid="this.setCustomValidity('Field must contain min. 5 characters')" onchange="try{setCustomValidity('')}catch(e){}"
— sohaiby
154

Agora há uma minlengthpropriedade na especificação HTML5 , bem como na validity.tooShortinterface.

Agora, ambos estão ativados nas versões recentes de todos os navegadores modernos. Para detalhes, consulte https://caniuse.com/#search=minlength .

— rhgb
fonte
1
Firefox 44 e ainda não implementado.
— Christian Læirbag
2
Ainda não é suportado fora do Chrome ou Opera. caniuse.com/#search=minlength
— rmcsharry
É janeiro de 2017 e ainda apenas o Chrome e o Opera suportam minlength
— TrojanName
2
@TrojanName O Firefox suporta minlengthatributos desde a versão 51 .
— Luca Detomi
16
Observações periódicas para atualizar o status sobre esta resposta Stack Overflow são menos útil do que dizer às pessoas para verificar aqui para obter informações atualizadas: caniuse.com/#search=minlength
— chadoh
19

Aqui está a solução somente para HTML5 (se você deseja validação de minlength 5 e maxlength 10 caracteres)

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

<form>
  <input pattern=".{5,10}">
  <input type="submit" value="Check"></input>
</form>
— Ali Çarıkçıoğlu
fonte
3
Como definir uma mensagem de erro personalizada se o campo não estiver OK?
— Basj
2
Para mensagem customizada, adicione titleatributo com a mensagem necessária.
— Shlomi Hassid
8
A mesma patternresposta foi dada alguns meses antes . Como esta resposta é melhor?
— Dan Dascalescu 01/09/2015
@DanDascalescu Ele não tinha tags de formulário e uma explicação clara. Também incluí uma demonstração funcional do jsfiddle. (entre as regras do Stackoverflow, afirmam que não é proibido fornecer respostas semelhantes, desde que seja útil à comunidade)
— Ali Çarıkçıoğlu
Uma maneira de fornecer uma resposta ainda melhor é incluir a demonstração aqui no SO como um trecho de código executável .
— Dan Dascalescu 27/01/19
8

Usei maxlength e minlength com ou sem requirede funcionou muito bem para HTML5.

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

`

— benaff033
fonte
6

O atributo minLength (diferente do maxLength) não existe nativamente no HTML5. No entanto, existem algumas maneiras de validar um campo se ele contiver menos de x caracteres.

Um exemplo é dado usando jQuery neste 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
"O atributo minLength (diferentemente do maxLength) não existe nativamente no HTML5" Sim, existe
— mikemaccana 27/02/15
Ainda não é suportado fora do Chrome ou Opera. caniuse.com/#search=minlength
— rmcsharry
4

Minha solução para a área de texto usando jQuery e combinando a validação HTML5 exigia a verificação do tamanho mínimo.

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
Resposta muito útil e elegante!
— Silvio Delgado
4

minlengthO atributo agora é amplamente suportado na maioria dos navegadores .

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

Mas, como em outros recursos do HTML5, o IE11 está ausente nesse panorama. Portanto, se você possui uma ampla base de usuários do IE11, considere o uso do patternatributo HTML5, que é suportado praticamente na maioria dos navegadores (incluindo o IE11).

Para ter uma implementação agradável e uniforme e talvez extensível ou dinâmica (com base na estrutura que gera seu HTML), eu votaria no patternatributo:

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

Ainda há uma pequena captura de usabilidade ao usar pattern. O usuário verá uma mensagem de erro / aviso não intuitiva (muito genérica) ao usar pattern. Veja este jsfiddle ou abaixo:

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

Por exemplo, no Chrome (mas semelhante na maioria dos navegadores), você receberá as seguintes mensagens de erro:

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

Nova versão:

Ele estende o uso (área de texto e entrada) e corrige bugs.

// 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
Obrigado por esta elegante solução atualizada. Funciona fora do Chrome / Opera, uma vez que eles não suportam minlength? caniuse.com/#search=minlength Acabei de testá-lo no Mac Safari e não funciona :( Vejo que você está adicionando o eventListener para navegadores que não são do Chrome / Opera, por isso talvez esteja fazendo algo errado.
— rmcsharry
Após a depuração do Safari, parece que var items = this.elements; está retornando a coleção FORMS, não os itens no formulário. Esquisito.
— Rmcsharry
2

Percebo que algumas vezes no chrome quando o preenchimento automático está ativado e os campos são preenchidos pelo método de compilação do navegador de preenchimento automático, ele ignora as regras de validação de minlength; portanto, nesse caso, você precisará desativar o preenchimento automático pelo seguinte atributo:

autocomplete = "off" 

<input autocomplete="new-password" name="password" id="password" type="password" placeholder="Password" maxlength="12" minlength="6" required />
— talsibony
fonte
Não se trata de campos de senha.
— Igor Popov
trata-se de entrada HTML, senha é realmente entrada HTML.
— talsibony
2

Consulte http://caniuse.com/#search=minlength , alguns navegadores podem não suportar esse atributo.

Se o valor do "tipo" for um deles:

texto, email, pesquisa, senha, tel ou url (aviso: não incluir número | nenhum suporte ao navegador "tel" agora - 2017.10)

use o atributo minlength (/ maxlength), especifica o número mínimo de caracteres.

por exemplo.

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

ou use o atributo "padrão":

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

Se o "tipo" for número , não há suporte para o tamanho mínimo (/ maxlength), mas você poderá usar o atributo min (/ max).

por exemplo.

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

Eu escrevi este código 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 você deseja fazer esse comportamento,
sempre mostre um pequeno prefixo no campo de entrada ou o usuário não pode apagar um prefixo :

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

Eu usei max e min então necessário e funcionou muito bem para mim, mas o que não tenho certeza é se é um método de codificação. Espero que ajude

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

No meu caso, no qual eu valido mais manualmente e usando o Firefox (43.0.4), minlengthe validity.tooShortinfelizmente não estou disponível.

Como eu só preciso ter comprimentos mínimos armazenados para prosseguir, uma maneira fácil e prática é atribuir esse valor a outro atributo válido da tag de entrada. Nesse caso, então, você pode usar min, maxe steppropriedades de [type = "number"] entradas.

Em vez de armazenar esses limites em uma matriz, é mais fácil encontrá-lo armazenado na mesma entrada, em vez de fazer com que o ID do elemento corresponda ao índice da matriz.

— Christian Læirbag
fonte
-4

Adicione um valor máximo e um mínimo, você pode especificar o intervalo de valores permitidos:

<input type="number" min="1" max="999" />
— Deepti Gehlot
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.