Minimum quantity jquery

Asked

Viewed 1,177 times

1

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>

4 answers

4

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

  • The "min-length" will be a great front-end solution for this type of problem. Thanks for ajua, more needed a solution via code. Solved.

3


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>

1

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();
}
  • Thanks for the help !!!

0

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;
  });

  • 1

    It is also interesting to deal with empty spaces. If the guy type 10 empty spaces in the input, this code will validate considering that there are 10 characters in the field, since the tb space is a character

  • really is a good idea. In my case it will not be necessary, but if it were a professional project it would surely be

  • Really, if it’s just a project where there’s no such concern, it wouldn’t be necessary. However I will post an answer to further enrich the post and that can help others. Abs!

  • OK.. The more people are helped the better

Browser other questions tagged

You are not signed in. Login or sign up in order to post.