2

Estou com uma duvida sobre o validate do Jquery. consigo usar ele normalmente. porem preciso de uma validação caso o usuário escolha uma opção no formulário "SELECT > OPTION", tenho duas opção, "SIM","NÃO". Se o usuário escolhe "SIM" vai aparecer outro campo para ele preencher-lo, mais ta ai minha duvida, não estou conseguindo muda o attributo do rules do campos que não era obrigatório, para TRUE, caso ele clique em cadastrar e ele não tenha digitado nesse campos que apareceu.

Alguém ai tem uma sugestão, mais quero continuar usando o Jquery validate:

Aqui esta o meu Codigo JQuery:

$('#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>

8
  • Bem vindo ao StackOverflow em Português. Editei sua pergunta para remover as saudações pois costumamos manter o texto o mais limpo possível para focar na sua dúvida sobre programação. Se tiver dúvidas quanto ao funcionamento, regras e procedimentos do site visite o Stack Overflow em Português Meta :) 14/12/2019 às 16:15
  • Muito Obrigado!
    – user49181
    22/12/2019 às 16:20
  • 1
    Modifique o código do fragmento para utilizar o JQuery. Tá dando erro. 22/12/2019 às 16:25
  • não entendi Augusto, tenho pouco conhecimento do StackOverFlow.
    – user49181
    22/12/2019 às 16:30
  • Pressione Executar. Imagem de auxilio 22/12/2019 às 16:33

1 Resposta 1

1

Ao invés de utilizar required: true, você pode passar um objeto para a propriedade required com uma condição para o input ser obrigatório ou não.

Esse objeto precisa ter a propriedade depends, onde nessa propriedade você define a função que irá dizer se o campo é obrigatório ou não, ou seja, ao invés de

rules: {
  quem_convidou: {
    required: true
  }
}

Você teria

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

Nesse caso a o input quem_convidou só será obrigatório se o valor de foi_convidado for sim.

Coloquei um exemplo no jsfiddle pois estou com dificuldade em importar o módulo validate no SO.

Você deve fazer log-in para responder a esta pergunta.