Show div after jquery validation

Question

Show div after jquery validation

Navigation

#1 by (1 votes)

1

I have a function that does the validation of 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? p>

$("#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><divclass="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>

html jquery

asked by anonymous 21.06.2018 / 16:52

1 answer

Logic of a neural network implementation Access attributes of type Object

score 1 · Answer 1

Dude I made an example here, I changed some things in js .

OBS: I suggest you do as your friend Netinho Santos said and use a plugin to validate the form, which saves time.

$(document).ready(function() {

  $("#tbc").hide();

  $("#proximo").click(function() {

  // verificar se os campos foram preenchidos
  var nome = $("#nome_completo").val();
  var email = $("#email_principal").val();
  var cpf = $("#cpf").val();
  var dataNasc = $("#data_nascimento").val();
  var telefone = $("#telefone").val();
  var celular = $("#celular").val();
  var estadoCivil = $("#estado_civil").val();
  var sexo = $("#sexo").val();
  var senioridade = $("#senioridade").val();
  var cep = $("#cep").val();
  var numero = $("#numero").val();

  // Mensagem de erro padrão a ser inserida após o campo
  var erromsg = '<div class="erromsg" style="color:red;margin:7px 0">Por favor, preencha o campo <span></span></div>';

  if (nome == "" || nome.length < 5) {
   $("#nome_completo").after(erromsg);
   $(".erromsg span").text("Nome*");
  }

  else if (email == "") {
   $("#email_principal").after(erromsg);
   $(".erromsg span").text("E-mail*");
  }

  else if (cpf == "") {
   $("#cpf").after(erromsg);
   $(".erromsg span").text("CPF*");
  }

  else if (dataNasc == "") {
   $("#dataNasc").after(erromsg);
   $(".erromsg span").text("Data de Nascimento*");
  }

  else if (telefone == "") {
   $("#telefone").after(erromsg);
   $(".erromsg span").text("Telefone*");
  }

  else if (celular == "") {
   $("#celular").after(erromsg);
   $(".erromsg span").text("Celular*");
  }

  else if (estadoCivil == "") {
   $("#estado_civil").after(erromsg);
   $(".erromsg span").text("Estado Civil*");
  }

  else if (sexo == "") {
   $("#sexo").after(erromsg);
   $(".erromsg span").text("Sexo*");
  }

  else if (senioridade == "") {
   $("#senioridade").after(erromsg);
   $(".erromsg span").text("Senioridade*");
  }

  else if (cep == "") {
   $("#cep").after(erromsg);
   $(".erromsg span").text("Cep*");
  }

  else {
   $("#tbc").show();
   $(".erromsg").remove();	// remove as mensagens de erro
  }

 });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divclass="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 class="trabalhe-conosco" id="tbc">
   <h1 style="background-color:red;color:#fff;width:25%;text-align:center"> Conteúdo </h1>
 </div>