Form Validation

Question

Well, I have a form that is validated if the inputs are empty, until then ok, does the validation in the if of all inputs correctly, but with the inputs completed, does not send in Else. Where I went wrong? :/

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

Answer 1

Sometimes we put a link tag on a site, but only for semantic reasons, because when we click on this link we do not want to open a new page, we want to open a modal window for example, a pop-up or perform some effect, animation and etc.

But a link tag will always be a link tag that when clicked by default will try to open a new address or anchor.

To prevent this from happening we use the preventDefault method, which as the name already gives idea prevents the default behavior of the object, ie cancels the behavior that the elements usually have on the page, so if the default behavior of a link is to open a site, we’re gonna cancel this.

Answer 2

Put the upload out of for, after validating all fields, if the Valid variable is true, it send.

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