Minimum quantity jquery

Question

I need a jquery code that when clicking on Submit it appears an alert and does not let the user continue unless you have entered 10 characters inside the 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>

Answer 1

When all browsers have support, you can use the attribute min-length in HTML. You can follow by this link which browsers already have this feature currently.

Still, you do not need to use Jquery to solve this problem. You can use the attributes together required and pattern HTML5. Defining the Pattern as .{10,} you have the form submitted only when the user has entered 10 or more characters:

<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

Answer 2

In addition to method verification .length, it is important to deal with empty spaces, otherwise if 10 x space in the field, the if($('#Descricao').val().length < 10) will return true (will validate) because the space is also computed as a character.

It is also not interesting to have empty spaces at the end of the value, for the same reason mentioned above.

To process (delete) these spaces unwanted, the method can be used .Trim(), that eliminates spaces before and after the 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>

Answer 3

Here is a functional code with your requested example:

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

Id was placed on your button, and changed the type. Using jquery I got the value of the description field:

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

and checked if it was in size, if it’s the form of the Submit()

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

Answer 4

Someone had posted the answer to my problem, but I don’t know why you deleted the post. That was the answer:

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