0

Bom, tenho um formulário que é validado se os inputs estão vazios, até aí ok, faz a validação no if de todos os inputs corretamente, mas com os inputs preenchidos, não faz o envio no else. Onde eu errei? :/

<form id="contact-form">
    <input type="text" name="nome" placeholder="Nome*:" value="" class="required" />
    <input type="text" name="telefone" placeholder="Telefone*:" value="" class="required" />
    <input type="text" name="email" placeholder="Email*:" value="" class="required" />
    <button type="submit" id="enviar"  name="submit">Concluir Cadastro</button> 
    </form>

Js:

$("#contact-form").submit(function(){

    event.preventDefault();

    var dados = $(this).serialize();
    var campos = $(this).find('.required');

    $(campos).each(function() {
        for(i=0; i=$(this).val() == ''; i++ ){
            if( $(this).val() == '' )
            {
                alert("Preencha os campos obrigatórios");
                $(this).focus();
                e.preventDefault();
            }else {
                 $.ajax({
                     type: "POST",
                     url: "cadastrar.php",
                     data: dados,
                     success: function(data)
                     {
                         $("#status").slideDown();
                         $("#status").html(data);
                     }
                 });
            $('#contact-form').trigger("reset");

            }
        }
    });
});

JSFiddle: https://jsfiddle.net/sLq1pcbp/

2 Respostas 2

0

As vezes colocamos uma tag de link em um site, mas apenas por motivos de semântica, porque quando clicamos nesse link não queremos abrir uma nova página, queremos abrir uma janela modal por exemplo, um pop-up ou realizar algum efeito, animação e etc.

Porém uma tag de link sempre será uma tag de link que ao ser clicada por padrão irá tentar abrir um novo endereço ou âncora.

Para evitar que isso aconteça nós usamos o método preventDefault, que como o nome já dá ideia previne o comportamento default do objeto, ou seja cancela o comportamento que os elementos geralmente tem na página, então se o comportamento padrão de um link é abrir um site, nós vamos cancelar isso.

0

Coloque o envio fora do for, depois que validar todos os campos, caso a varias valid seja true, ele enviar.

$("#contact-form").submit(function(){

    event.preventDefault();

    var dados = $(this).serialize();
    var campos = $(this).find('.required');

    $(campos).each(function() {
        var valid = true;
        for(i=0; i=$(this).val() == ''; i++ ){
            if( $(this).val() == '' )
            {
                alert("Preencha os campos obrigatórios");
                $(this).focus();
                e.preventDefault();
                valid = false;
            }
        }
        if(valid){
            $.ajax({
                     type: "POST",
                     url: "cadastrar.php",
                     data: dados,
                     success: function(data)
                     {
                         $("#status").slideDown();
                         $("#status").html(data);
                     }
                 });
            $('#contact-form').trigger("reset");
        }
    });
});

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 .