1

Tenho um campo no meu formulário em PHP onde pergunto se o usuário tem telefone em casa. É um select com SIM e NÃO. Caso seja SIM o campo a seguir tem que ser obrigatório o preenchimento, caso negativo, o campo não será obrigatório.

   <div class="col-sm-4 form-group">
<label for="telcasa"> Telefone de Casa:</label>  
<select required name="telcasa" required  class="form-control" id="telcasa">
    <option value="escolhaopcao">Selecione</option>
    <option value="Sim">Sim</option>
    <option value="Não">Não</option>
  </select>
 </div>   

 <div class="col-sm-8 form-group">
                                    <label for="telefone_casa">Caso sua resposta seja sim, deixe o número aqui: </label>
                                    <input name="telefone_casa" type="number" required class="form-control" id="telefone_casa" maxlength="50">
                                </div> 

Como faço essa regra funcionar? Se a seleção for SIM o campo Caso sua resposta seja sim, deixe o número aqui: ficará obrigatório, caso Não, ele não será obrigatório.

Segue imagem dos campos:

inserir a descrição da imagem aqui

2 Respostas 2

0

Da para fazer com JS puro de forma bem simples, se o value do Select for nao, vc remove o atributo require do input

Pelo CSS eu coloquei uma bordar vermelho nos campos com require, então quando vc escolher NÃO a borda vai sumir, pq vai remover o atributo require do input

inserir a descrição da imagem aqui

let sel = document.getElementById('telcasa');

function verifica() {
    let nao = document.getElementById('telefone_casa');
    if (sel.value == 'nao') {
        nao.required = false;
    } else {
        nao.required = true;
    }
}

sel.addEventListener('change', verifica);
:required {
  border:2px solid red !important;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

<div class="container">
    <div class="row">
        <div class="col-sm-4 form-group">
            <label for="telcasa"> Telefone de Casa:</label>
            <select required name="telcasa" required class="form-control" id="telcasa">
                <option value="escolhaopcao">Selecione</option>
                <option value="sim">Sim</option>
                <option value="nao">Não</option>
            </select>
        </div>

        <div class="col-sm-8 form-group">
            <label for="telefone_casa">Caso sua resposta seja sim, deixe o número aqui: </label>
            <input name="telefone_casa" type="number" required class="form-control" id="telefone_casa" maxlength="50">
        </div>
    </div>
</div>

4
  • Perfeito irmão, mas aqui para mim não funcionou! No dreamweaver dá uma mensagem de erro, There is a syntax error on line 23: Code hinting may not work until you fix this error. Essa linha 23 é esse codigo: let sel = document.getElementById('telcasa'); 2/10/2019 às 14:14
  • @AlessandroRamos não tem porque não funcionar, vc conferiu se o ID do elemento é esse mesmo ou vc mudou o nome do ID? Não tem porque não funcionar no VS Code não acusa erro algum, e aqui no site funciona perfeitamente, então foi vc que mudou algo ai que fez o código parar de funcionar. Inclusive se vc pegar meu código e testar localmente em um arquivo seu separado muito provavelmente tb não vai apresentar erros, copia e cola a resposta em um HTML novo e testa
    – hugocsl
    2/10/2019 às 14:29
  • Valeu irmão, deu certo!!!! 2/10/2019 às 14:41
  • @AlessandroRamos ai sim, não tinha pq não funcionar rss
    – hugocsl
    2/10/2019 às 14:56
0

Para o select, o segredo é esta option <option value="">Selecione</option> Como você adicionou o atributo required no select, então, a primeira option deve ter o seu value igual a "";
Ou É só adicionar o valor do primeiro option igual a "";

Como você pediu na questão, usando JQuery:

Tente este código:

$("#telcasa").change(function(){

 let _this =  this;

 if(_this.selectedIndex == 1){

$("#telefone_casa").attr("required",true);

}
else{

$("#telefone_casa").removeAttr("required");

}

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<label for="telcasa"> Telefone de Casa:</label>  
<select required name="telcasa" required  class="form-control" id="telcasa">
    <option value="">Selecione</option>
    <option value="Sim">Sim</option>
    <option value="Não">Não</option>
  </select>
 </div>   

 <div class="col-sm-8 form-group">
                                    <label for="telefone_casa">Caso sua resposta seja sim, deixe o número aqui: </label>
                                    <input name="telefone_casa" type="number" required class="form-control" id="telefone_casa" maxlength="50">
                                </div> 

Tenta este exemplo:

https://repl.it/@TaffarelXavier/LatestAustereEfficiency

6
  • Oi amigo, obrigado pelo contato, não deu certo :( 1/10/2019 às 22:44
  • O que está aparecendo? O que você realmente quer? 1/10/2019 às 22:48
  • Então amigo, com a seleção do NÃO o campo do telefone_casa ainda continua sendo obrigatório o preenchimento. Deveria ser liberado, conforme a função que vc me enviou, correto? Será que tenho que remover o "required" dessa linha: <input name="telefone_casa" type="number" required class="form-control" id="telefone_casa" maxlength="50"> 1/10/2019 às 22:54
  • Na verdade, se você estiver usando o JQuery, isso já é feito automaticamente, conforme eu descrevi no código que mandei. 1/10/2019 às 22:55
  • Foi o que imaginei 1/10/2019 às 22:55

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .