3
I have a code where I validate the blank fields, but I wanted to know how to do it so that when the fields are filled submit
to the page send php.
Form:
<form method="post" action="send.php">
<div class="form-group">
<div class="row">
<div class="col-md-12">
<label>Nome</label>
<input type="text" class="form-control" id="nome" name="nome" placeholder="Insira seu Nome">
</div>
</div>
</div>
<div class="form-group" hidden>
<div class="row">
<div class="col-md-6">
<label>E-mail</label>
<input type="fqemail" class="form-control" id="email" name="email" placeholder="Insira seu E-mail">
</div>
<div class="col-md-6">
<label>Celular</label>
<input type="text" class="form-control" id="celular" name="telefone">
</div>
</div>
</div>
<div class="form-group" hidden>
<div class="row">
<select id="pais" hidden></select>
<div class="col-md-6">
<label>Estado</label>
<select class="form-control" id="estado" name="estado">
</select>
</div>
<div class="col-md-6">
<label>Cidade</label>
<select type="text" class="form-control" id="cidade" name="cidade" placeholder="Insira sua Cidade">
</select>
</div>
</div>
</div>
<div class="form-group" hidden>
<div class="row">
<div class="col-md-12">
<label>Mensagem</label>
<textarea class="form-control" id="mensagem" name="mensagem" rows="3"></textarea>
</div>
</div>
</div>
<button type="button" class="btn btn-primary valida" id="send">Enviar</button>
Validation:
$(".valida").click(function(){
// remove as mensagens de erro
$(".erromsg").remove();
// verificar se os campos foram preenchidos
var nome = $("#nome");
var email = $("#email");
var celular = $("#celular");
var estado = $("#estado");
var cidade = $("#cidade");
// Mensagem de erro padrão a ser inserida após o campo
var erromsg = '<div class="erromsg">Por favor, preencha o campo <span></span></div>';
if(!nome.val() || nome.val().length < 5){
nome.after(erromsg);
$(".erromsg span").text("Nome*");
return;
}
if(!email.val()){
email.after(erromsg);
$(".erromsg span").text("E-mail*");
return;
}
if(!celular.val()){
celular.after(erromsg);
$(".erromsg span").text("Celular*");
return;
}
if(!estado.val()){
estado.after(erromsg);
$(".erromsg span").text("Capital*");
return;
}
if(!cidade.val()){
cidade.after(erromsg);
$(".erromsg span").text("Estado*");
return;
}
});
i did not understand well you want it only send if all fields are filled ? and because the other fields are Hidden ?
– Bulfaitelo
i to hide with Hidden, to show the next field after the first one is filled in, so as I am using type="button" when I finish filling out the form, does not run the Submit and I do not know how to make this part work rs
– Jvs Corrêa
you can use a button and use type="Submit" would not solve your case ?
– Bulfaitelo
when I use type="Submit", it does not validate the fields, it runs send.php directly, as I am using the Submit button to validate every time it is clicked on, so esotu with this problem
– Jvs Corrêa