How do I make an input not accept a blank entry?

0

<head>
    <title>WEB VIDEO AULAS</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><!--LatestcompiledandminifiedCSS--></head><body><br/><br/><br/><br/><br/><divclass="container">

        <div class="row">
            <div class="col-lg-3">
                <div class="input-group">
                    <input type="text" class="form-control" size="35" id="palavra" placeholder="Digite seu nome ou sua matrícula.." required />
                    <span class="input-group-btn">
                        <button class="btn btn-blue" id="buscar" type="button">Buscar</button>
                    </span>
                </div>
            </div>
        </div>
        <div id="dados"></div>
    </div>
     <link rel="stylesheet" href="/SLP/css/css/CDTpag1.css">
    <script>


        function buscar(palavra)
        {
            var page = "/SLP/css/css/busca.php";
            $.ajax
                    ({
                        type: 'POST',
                        dataType: 'html',
                        url: page,
                        beforeSend: function () {
                            $("#dados").html("Carregando...");
                        },
                        data: {palavra: palavra},
                        success: function (msg)
                        {
                            $("#dados").html(msg);
                        }
                    });
        }


        $('#buscar').click(function () {
            buscar($("#palavra").val())
        });
    </script>

</body>

    
asked by anonymous 19.04.2017 / 06:30

4 answers

0

As you are capturing the click event of the #palavra element, the browser ends up "passing" field verification and executing the buscar() function.

When you submit the form, the browser itself checks for required and pattern attributes before proceeding.

So, change the call of the buscar() function:

        $('#buscar').click(function ()
        {
            if( $('#palavra').val() != '' && $('#palavra').val() != 'undefined' && $('#palavra').val() != null $('#palavra').val() != ' ' )
            {

                buscar($("#palavra").val())

            } else
            {
                alert("Você deve inserir seu nome ou matrícula!");
                return false;
            }
        });

In my code I checked if the field is empty, but you can put a regular expression for example.

I put a alert in case of invalid entry, which can be replaced by a code to your liking, such as showing an error div below the input for example.

  

Tested with Google Chrome !

Now, use the imagination !

    
19.04.2017 / 11:25
1

If I understand correctly, you do not want input to be empty or contain only space.

I would do some simple like this:

$('#buscar').click(function () {

     var $palavra = $('#palavra');


     $palavra.val().trim().length && buscar($palavra.val());

      // ou

      if ($palavra.val().trim().length) {
          buscar($palavra.val());
      }
});

The $palavra.val().trim().length statement will evaluate whether the value of is false or not through the number returned. If it is zero, the buscar function will not be executed. This is because trim removes whitespace from the beginning and end of String .

Another option without jQuery , in my opinion, would be setting a required in the desired input and adding a feature in onchange to remove spaces from the beginning and the end.

<form>
<input type="text" required onchange="this.value = this.value.trim()">
<button type='submit'> Enviar </button>
</form>
    
19.04.2017 / 14:00
0

Add pattern to your input. So it will allow only words. If user type multiple spaces it will not pass

<input type="text" class="form-control" size="35" id="palavra" placeholder="Digite seu nome ou sua matrícula.." required pattern="^[^-\s][a-zA-ZÀ-ú ]*">

You can also validate in javascript

$('#buscar').click(function () { 
      if( $("#palavra").val().length < 1 ) { 
          Alert("digite uma palavra")
          return false;
      } else {
          buscar( $("#palavra").val() );
      }
 });
    
19.04.2017 / 06:51
0

I believe you can only use jquery to do all the necessary verification for that simple search. I would make a modification only in this part.

$('#buscar').click(function () {
  var keyword = $("#palavra").val();    // O valor pode ser algo como: '     oi     '
      keyword = $.trim( keyword );      // o trim vai remover os espacos do comeco e do fim: 'oi'
  if( keyword.length ){
    buscar( keyword );
  } else {
    alert( 'Busca em branco' );
  }
});
    
19.04.2017 / 12:44