5

Programando para o registro de vários dados do mesmo type ou mesma class dentro do banco de dados, me deparei com a necessidade de verificar se algum destes inputs não estaria vazio no momento da inserção.

Como é um formulário de registro de contatos que contém 10 campos que serão inseridos a cada envio, preciso de uma função para que estes campos sejam processados com 10 e-mails de cada vez, nenhum a mais nem a menos.

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

3 Respostas 3

10

Se os inputs que quer verificar são emails eu costumo verificar qual o elemento que não estáa preenchido e depois mostrar visualmente qual o elemento que está por preencher.

$(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");
        }
    });
});

Exemplo: http://jsfiddle.net/rodducqu/

2

Desenvolvi este script que atende a sua necessidade, sabendo que você terá 10 types = email, então criei esta solução que controla se todos os types=email estão preenchidos. Você ainda poderá usar uma função para verificar se o e-mail é válido.

    <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>
1
  • simples e fácil, as vezes procuramos coisas mais complexas quando a solução está nos conceitos básicos da linguagem. each é algo que muitos conhecem mas poucos realmente usam!!
    – user30025
    12/08/2015 às 14:16
0

amigo, como está usando um input do tipo "email" e um placeholder, acho que nãos seria um problema usar uma validação com HTML5, então basta colocar a propriedade required para exigir o preenchimento do campo e um pattern para que o email seja enviado com um formato valido.

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .