1

Preciso de um código jquery que ao clicar no submit ele apareça um alerta e não deixe o usuario continuar a menos que tenha digitado 10 caracteres dentro do input

<form action="add.php" id = "form" method="post">
<div class="row">
        <div class="form-group col-md-2">
            <label for="descricao">Descrição</label>
            <input type="text" class="form-control" id="Descricao">
        </div>
    </div>
    <div id="actions" class="row">
        <div class="col-md-12">
            <button type="submit" class="btn btn-primary">Salvar</button>
            <a href="index.php" class="btn btn-default">Cancelar</a>
        </div>
    </div>
</form>

0

4 Respostas 4

4

Quando todos os navegadores tiverem suporte, será possível utilizar o atributo min-length no HTML. Você pode acompanhar por este link quais navegadores já contam com esse recurso atualmente.

Ainda assim, você não precisa fazer uso de JQuery para resolver esse problema. Pode-se utilizar em conjunto os atributos required e pattern do HTML5. Definindo o pattern como .{10,} você faz com que o formulário seja submetido somente quando o usuário inserir 10 ou mais caracteres:

<form action="add.php" id = "form" method="post">
<div class="row">
        <div class="form-group col-md-2">
            <label for="descricao">Descrição</label>
            <input type="text" class="form-control" id="Descricao" pattern=".{10,}" title='Insira 10 ou mais caracteres.' required>
        </div>
    </div>
    <div id="actions" class="row">
        <div class="col-md-12">
            <button type="submit" class="btn btn-primary">Salvar</button>
            <a href="index.php" class="btn btn-default">Cancelar</a>
        </div>
    </div>
</form>

youmightnotneedjquery

1
  • O "min-length" será uma ótima solução front-end para esse tipo de problema. Obrigado pela ajua, mais precisava de uma solução via código. Resolvido.
    – w.rock
    24/01/2018 às 19:27
3

Além da verificação com método .length, é importante tratar de espaços vazios, caso contrário, se forem inseridos 10 x space no campo, o if($('#Descricao').val().length < 10) vai retornar true (vai validar) porque o space também é computado como um caractere.

Também não é interessante que se tenha espaços vazios nas extremidades do valor, pelo mesmo motivo citado acima.

Para tratar (eliminar) esses espaços indesejados, pode-se usar o método .trim(), que elimina os espaços antes e depois da string:

$('#form').on('submit', function() {
   if($('#Descricao').val().trim().length < 10) {
      alert('Tem menos de 10 chars');
      return false;
   }
   return true;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
    <input type="text" id="Descricao" />
    <input type="submit" value="Verificar" />
</form>

1
1

Eis um código funcional com seu exemplo solicitado:

$(function() {
	
  $('#enviar').click(function () {
		var desc = $('#Descricao').val();
      
      if(desc.length <= 9){
        alert('são no minimo 10 caracteres');
      }else{
        $('#form').submit();
      }
	});


});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="add.php" id="form" method="post">
<div class="row">
        <div class="form-group col-md-2">
            <label for="descricao">Descrição</label>
            <input type="text" class="form-control" id="Descricao">
        </div>
    </div>
    <div id="actions" class="row">
        <div class="col-md-12">
            <button type="button" id="enviar" class="btn btn-primary">Salvar</button>
            <a href="index.php" class="btn btn-default">Cancelar</a>
        </div>
    </div>
</form>

Foi colocado id no seu button, e alterado o tipo. Usando jquery eu peguei o valor do campo descrição:

var desc = $('#Descricao').val();

e verifiquei se ele era no tamanho, se for o form da submit()

if(desc.length <= 9){
    alert('são no minimo 10 caracteres');
}else{
   $('#form').submit();
}
1
  • Obrigado pela ajuda !!!
    – w.rock
    24/01/2018 às 19:24
0

Alguém tinha postado a resposta para o meu problema, mais não sei por qual motivo apagou o post. A resposta era essa:

$('#form').on('submit', function() {
if($('#Descricao').val().length < 10) {
  alert('Tem menos de 10 chars');
  return false;
}
return true;
  });

4
  • 1
    É interessante tratar também de espaços vazios. Se o cara digitar 10 espaços vazios no input, esse código vai validar considerando que existem 10 caracteres no campo, já que o espaço tb é um caractere
    – Sam
    24/01/2018 às 19:33
  • realmente é uma boa idéia. No meu caso não será necessário, mais se fosse um projeto profissional com certeza seria
    – w.rock
    24/01/2018 às 19:46
  • Realmente, se for só um projeto onde não haja essa preocupação, não seria necessário. Porém eu vou postar uma resposta para enriquecer mais o post e que possa ajudar a outros. Abs!
    – Sam
    24/01/2018 às 19:48
  • Ok.. Quanto mais gente for ajudada melhor
    – w.rock
    24/01/2018 às 19:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .