Minimum amount of jquery

Question

Minimum amount of jquery

Navigation

#1 by (4 votes)
#2 by (3 votes)
#3 by (1 votes)
#4 by (0 votes)

1

I need a jquery code that when clicking on submit it will appear an alert and will not let the user continue unless you have typed 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>

html jquery

asked by anonymous 24.01.2018 / 19:40

4 answers

4

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

Still, you do not have to use JQuery to solve this problem. You can use the attributes required and pattern of HTML5. Setting the pattern to .{10,} causes the form to be submitted only when the user enters 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

24.01.2018 / 19:53

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><formaction="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 the type changed. Using jquery I got the value from the description field:

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

and checked if it was in size, if it is the form of submit ()

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

24.01.2018 / 19:46

0

Someone had posted the answer to my problem, but I do not know why it deleted the post. The answer was this:

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

24.01.2018 / 20:24

How do I relate three tables? Add + 1 to the current number (Jquery)

score 3 · Accepted Answer

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

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

To treat (eliminate) these unwanted spaces , you can use the . trim () , which 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><formid="form">
    <input type="text" id="Descricao" />
    <input type="submit" value="Verificar" />
</form>