Jquery validate (Rules)

Question

I have a question about Jquery’s validation. I can use it normally. but I need a validation if the user chooses an option in the "SELECT > OPTION" form, I have two options, "YES", "NO". If the user chooses "YES" will appear another field for him to fill it, but there is my doubt, I am not getting changes the attribution of the fields Rules that was not mandatory, to TRUE, in case he click register and he has not typed in this fields that appeared.

Someone there has a suggestion, but I want to continue using Jquery validate:

Here is my Jquery Code:

$('#form-visitantes').validate({
  rules: {
    nomecompleto: {
      required: true
    },
    sexo: {
      required: true
    },
    fone: {
      required: true
    },
    email: {
      required: true
    },
    foi_convidado: {
      required: false
    }
  },
  messages: {
    nomecompleto: {
      required: 'Campo Obrigatório'
    },
    sexo: {
      required: 'Campo Obrigatório'
    },
    fone: {
      required: 'Campo Obrigatório'
    },
    email: {
      required: 'Campo Obrigatório'
    },
    foi_convidado: {
      required: 'Campo Obrigatório'
    }

  },
  errorClass: "text-danger",
  errorElement: "span",
  highlight: function(element, errorClass, validClass) {
    $(element).parents('.control-group').addClass('text-danger');
  },
  unhighlight: function(element, errorClass, validClass) {
    $(element).parents('.control-group').removeClass('text-danger');
    $(element).parents('.control-group').addClass('success');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.js"></script>
<form class="card shadow-5 form-type-fill" method="POST" action="#" id="form-visitantes">
  <h5 class="card-title"><strong>CADASTRAR VISITANTES</strong></h5>
  <input type="hidden" name="acao" id="acao" value="inserir">
  <div class="card-body">
    <h6 class="text-uppercase fs-10 ">Dados Pessoais</h6>
    <hr class="hr-sm mb-2 border-info">
    <div class="resposta-mensagem slideOutDown"></div>
    <div class="row">
      <div class="col-lg-12">
        <div class="row">
          <div class="col-lg-4">
            <div class="form-group">
              <label>Nome Completo:</label>
              <input class="form-control" autocomplete="off" autofocus type="text" name="nomecompleto" id="nomecompleto" value=''>
            </div>
          </div>
          <div class="col-lg-2">
            <div class="form-group">
              <label>Sexo:</label>
              <select class="form-control" data-provide="selectpicker" id="sexo" name="sexo" data-live-search="false">
                <option value=''>Genero</option>
                <option value='masculino'>Masculino</option>
                <option value='feminino'>Feminino</option>
              </select>
            </div>
          </div>
          <div class="col-lg-3">
            <div class="form-group">
              <label>E-mail:</label>
              <input class="form-control" autocomplete="off" autofocus type="text" name="email" id="email" value="">
            </div>
          </div>
          <div class="col-lg-3">
            <div class="form-group">
              <label>Telefone:</label>
              <input class="form-control" autocomplete="off" autofocus type="text" name="fone" id="fone" value="">
            </div>
          </div>
        </div>
      </div>
    </div>
    <h6 class="text-uppercase fs-10">Outras Informações</h6>
    <hr class="hr-sm mb-2 border-info">
    <div class="row">
      <div class="col-lg-2">
        <div class="form-group">
          <label>Frequenta alguma igreja:</label>
          <select class="form-control" data-provide="selectpicker" id="frequenta-igreja" name="frequenta_um_igreja">
            <option value='nao'>Não</option>
            <option value='sim'>Sim</option>
          </select>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="form-group">
          <label>Que Igreja Frequenta:</label>
          <input class="form-control  cursor-pointer" readonly autocomplete="off" autofocus type="text" name="qual_frequenta" id="frequenta" value="">
          <span id="fmsg"></span>
        </div>
      </div>
      <div class="col-lg-2">
        <div class="form-group">
          <label>Foi Convidado:</label>
          <select class="form-control" data-provide="selectpicker" id="foi-convidado" name="foi_convidado">
            <option value='nao'>Não</option>
            <option value='sim'>Sim</option>
          </select>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="form-group">
          <label>Quem?:</label>
          <input class="form-control" readonly autocomplete="off" autofocus type="text" name="quem_convidou" id="quem" value="">
          <span id="qmsg"></span>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-4">
        <div class="form-group">
          <label>Data Visita:</label>
          <input class="form-control" data-date-format="dd/mm/yyyy" class="form-control" data-provide="datepicker" autocomplete="off" autofocus type="text" name="data_visita" id="data_visita" value="<?= (isset($dados_edit->nconjuge) == null) ? date('d/m/Y') : $dados_edit->nconjuge ?>">
        </div>
      </div>
      <div class="col-lg-8">
        <div class="form-group">
          <label>Pedido de Oração:</label>
          <input class="form-control" autocomplete="off" autofocus type="text" name="pedidoOracao" id="pedidoOracao" value="<?= (isset($dados_edit->nascimentoconjuge) == null) ? " " : formata_data_brasilia($dados_edit->nascimentoconjuge) ?>">
        </div>
      </div>
    </div>
  </div>
  <footer class="card-footer text-right">
    <a class="btn btn-default" id="cliquei" data-href="<?php echo base_url('visitantes'); ?>">Cancelar</a>
    <button class="btn btn-primary" id="btnInserir">Salvar</button>
  </footer>
</form>

Answer 1

Instead of using required: true, you can pass an object to the property required on condition that the input is mandatory or not.

This object must have the property depends, where in this property you define the function that will say whether the field is mandatory or not, ie instead of

rules: {
  quem_convidou: {
    required: true
  }
}

You would have

rules: {
  quem_convidou: {
    required: {
      depends: function() {
        return $('#foi-convidado').val() === 'sim'
      }
    }
  }
}

In that case the input quem_convidou will only be mandatory if the value of foi_convidado for sim.

I put an example on jsfiddle because I’m having a hard time importing the module validate in the OS.