Turns a field into the required form when select Yes

Question

I have a field in my PHP form where I ask if the user has a phone at home. It is a select with YES and NO. If YES the following field must be required to be completed, if NO, the field will not be required.

   <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> 

How do I make that rule work? If the selection is YES the field If your answer is yes, leave the number here: it will be mandatory, if No, it will not be required.

Follow picture of the fields:

Answer 1

To the select, the secret is this option <option value="">Selecione</option> How you added the required attribute in select, then the first option must have its value equal to "";
Or Just add the value of the first option equal to "";

As you asked in the question, using JQuery:

Try this code:

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

Try this example:

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

Answer 2

You can do with pure JS in a very simple way, if the value of Select for nao, you remove the attribute require of input

By CSS I put a red embroidery on the fields with require, then when you choose NÃO the edge will fade, because it will remove the attribute require of input

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>