How to check if any field of a specific class or type is empty?

Asked

Viewed 14,765 times

5

Programming for recording multiple data from the same type or even class within the database, I came across the need to verify that any of these inputs would not be empty at the time of insertion.

As is a form of registro de contatos which contains 10 fields that will be inserted at each send, I need a function so that these fields are processed with 10 emails at a time, no more nor less.

  <form role="form" id="form_cadastra" action="" method="post" enctype="application/x-www-form-urlencoded">

    <div class="form-group">
      <label for="exampleInputEmail1">E-mail 1</label>
      <input type="email" value="" class="form-control" placeholder="Enter email">
    </div>

    { ... }

    <div class="col-xs-12 col-sm-12 col-md-12">
      <button type="submit" class="btn btn-primary">Cadastrar</button>
    </div>
  </form>
jquery

3 answers

10


If the inputs you want to check are emails I usually check which element is not filled and then show visually which element is unfilled.

$(function () {
    $("#form_cadastra").submit(function () {
        var vazios = $("input[type=email]").filter(function() {
            return !this.value;
        }).get();

        if (vazios.length) {
            $(vazios).addClass('vazio');
            alert("Todos os campos devem ser preenchidos.");
            return false;
        } else {
            alert("Eureka");
        }
    });
});

Example: http://jsfiddle.net/rodducqu/

2

I developed this script that meets your need, knowing that you will have 10 types = email, then created this solution that controls whether all types=email are filled. You can still use a function to verify that the email is valid.

    <script src="jquery-1.11.1.min.js" type="text/javascript"></script> 
    <script>
    $(function(){

        $("#form_cadastra").submit(function(){

            var isValid = true;
            $("input[type=email]").each(function() {

                var element = $(this);
                if (element.val() == "") { isValid = false; }

            }); // each Function

            // Função permite verificar se todos os campos estão preenchidos dentro do each 
            if(isValid == false){ alert("Todos os campos devem ser preenchidos."); return false;} 
            else { alert("Eureka"); }   

        }); // termina #form_cadastra

    }); // termina document
</script>

  • simple and easy, sometimes we look for more complex things when the solution lies in the basic concepts of language. each is something that many know but few really use!!

0

friend, as you are using an input of type "email" and a placeholder, I think it would not be a problem to use a validation with HTML5, so just put the property required to require completion of the field and a pattern so that the email is sent in a valid format.

<form>
  <div>
    <input id="email1" type="email" required placeholder="Email" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,}" />
  </div>
  <div>
    <input id="email2" type="email" required placeholder="Email" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,}" />
  </div>
  <div>
    <input id="email3" type="email" required placeholder="Email" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,}" />
  </div>
  <div>
    <input id="email4" type="email" required placeholder="Email" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,}" />
  </div>
  <input type="submit" />
</form>

Browser other questions tagged jquery

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