1
I have a function that validates the empty fields, when completing all fields and clicking on the button I need to show the hidden div, how can I implement this function to validate and show the div if all are filled?
$("#proximo").click(function() {
// remove as mensagens de erro
$(".erromsg").remove();
// verificar se os campos foram preenchidos
var nome = $("#nome_completo");
var email = $("#email_principal");
var cpf = $("#cpf");
var dataNasc = $("#data_nascimento");
var telefone = $("#telefone");
var celular = $("#celular");
var estadoCivil = $("#estado_civil");
var sexo = $("#sexo");
var senioridade = $("#senioridade");
var cep = $("#cep");
var numero = $("#numero");
// 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 (!cpf.val()) {
cpf.after(erromsg);
$(".erromsg span").text("CPF*");
return;
}
if (!dataNasc.val()) {
dataNasc.after(erromsg);
$(".erromsg span").text("Data de Nascimento*");
return;
}
if (!telefone.val()) {
telefone.after(erromsg);
$(".erromsg span").text("Telefone*");
return;
}
if (!celular.val()) {
celular.after(erromsg);
$(".erromsg span").text("Celular*");
return;
}
if (!estadoCivil.val()) {
estadoCivil.after(erromsg);
$(".erromsg span").text("Estado Civil*");
return;
}
if (!sexo.val()) {
sexo.after(erromsg);
$(".erromsg span").text("Sexo*");
return;
}
if (!senioridade.val()) {
senioridade.after(erromsg);
$(".erromsg span").text("Senioridade*");
return;
}
if (!cep.val()) {
cep.after(erromsg);
$(".erromsg span").text("Senioridade*");
return;
}
if ($("#nome").val() == "") {
alert("vazio");
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="trabalhe-conosco">
<div class="row">
<h3>Dados Pessoais</h3>
<div class="col-md-4">
<div class="form-group">
<label for="nome_completo">Nome completo</label>
<input id="nome_completo" class="form-control" name="curriculo[nome_completo]">
</div>
</div>
<div class="col-md-4">
<label for="email_principal">E-mail principal</label>
<input id="email_principal" class="form-control" name="curriculo[email_principal]">
</div>
<div class="col-md-4">
<label for="email_secundario">E-mail secundário</label>
<input id="email_secundario" class="form-control" name="curriculo[email_secundario]">
</div>
</div>
<div class="row btm">
<div class="col-md-3">
<label for="cpf">CPF</label>
<input id="cpf" class="form-control" name="curriculo[cpf]">
</div>
<div class="col-md-2">
<label for="data_nascimento">Data de nascimento</label>
<input id="data_nascimento" class="form-control d1" name="curriculo[data_nascimento]" autocomplete="off">
</div>
<div class="col-md-3">
<label for="telefone">Telefone</label>
<input id="telefone" class="form-control" name="curriculo[telefone]">
</div>
<div class="col-md-3">
<label for="celular">Celular</label>
<input id="celular" class="form-control" name="curriculo[celular]">
</div>
</div>
<div class="row btm">
<div class="col-md-3">
<label for="estado_civil">Estado civil</label>
<select id="estado_civil" class="form-control" name="curriculo[estado_civil]">
<option value=""></option>
<option value="Casado">Casado</option>
<option value="Solteiro">Solteiro</option>
<option value="União Estável">União Estável</option>
<option value="Divorciado">Divorciado</option>
<option value="Viúvo">Viúvo</option>
</select>
</div>
<div class="col-md-3">
<label for="sexo">Sexo</label>
<select class="form-control" id="sexo" name="curriculo[sexo]">
<option value=""></option>
<option value="Masculino">Masculino</option>
<option value="Feminino">Feminino</option>
</select>
</div>
<div class="col-md-3">
<label for="senioridade">Senioridade</label>
<select id="senioridade" class="form-control" name="curriculo[senioridade]">
<option value=""></option>
<option value="Estágio">Estágio</option>
<option value="Trainee">Trainee</option>
<option value="Operacional">Operacional</option>
<option value="Supervisão">Supervisão</option>
<option value="Gerência">Gerência</option>
<option value="Diretoia">Diretoria</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-9">
<button type="button" class="btn btn-send" id="proximo" value="Próximo">Próximo</button>
</div>
</div>
</div>
//Div que quero mostrar ao clicar em "próximo"
<div class="trabalhe-conosco" id="tbc">
<h1> Conteúdo </h1>
</div>
Where is the function muestra_oculta and the hidden div?
– LeAndrade
I tried to do but it does not validate according to the fields in white, then removed, forgot to delete to post the doubt
– Jvs Corrêa
Still missing the div you want to show.
– LeAndrade
Includes the div, sorry
– Jvs Corrêa
I suggest you use the jQuery Validation plugin to validate your inputs and will even help you give a show in div. Here’s a simple example of how to do. http://jsfiddle.net/sw87W/2442/
– Netinho Santos