Form Validation

Question

Form Validation

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Well, I have a form that is validated if the inputs are empty, until then ok, does the validation in the if of all the inputs correctly, but with the inputs filled, does not send in the else. Where did I go 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: link

javascript jquery

asked by anonymous 27.04.2017 / 19:02

2 answers

Multi filter in web.xml with struts2 multiply div's repeat loop with divs

score 0 · Answer 1

Sometimes we put a link tag on a website, 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 some effect, animation and etc.

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

To avoid this, we use the preventDefault method, which, as the name already gives, prevents the default behavior of the object, that is, cancels the behavior that the elements usually have on the page, so if the default behavior of a link is open a website, we'll cancel it.

score 0 · Answer 2

Place the send out of for, after validating all the fields, if the multiple valid is true, send it.

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