How to make a text field mandatory when one of the radio Buttons is selected?

Question

I intend to make the field "Idsiliamb" mandatory, only when the radio button "Company" is selected, if the field "Private" is selected nothing will happen.

At the moment when I select the radio button "Company" the text field "Idsiliamb" is scintillating, but it does not display the error message and allows me to insert even when empty.

<form class="form-horizontal"  method="POST" action="index.php?cmd=addter2" > 


   <div class="form-group">
    <label class="control-label col-sm-4" for="Idsiliamb"> Idsiliamb </label>
    <div class="col-sm-6"> 
      <input type="text" class="form-control" id="Idsiliamb" placeholder="Digite o Idsiliamb" name="Idsiliamb" onclick="document.getElementById('Empresa').checked=true">
    </div>
  </div>

   <div class="form-group">
    <label class="control-label col-sm-4" for="Tipo"> Tipo  </label>
    <div class="form-group">
    <input type="radio" name="Tipo" id='radio_r' value="Empresa" onclick="document.getElementById('Idsiliamb').focus()" required>Empresa
    <input type="radio" name="Tipo" id='radio_p' value="Particular" >Particular
    </div>


  </div>



  <br>
  <div class="form-group"> 
    <div class="col-sm-offset-4 col-sm-6">
      <button type="submit" class="btn btn-default">Adicionar Terceiros </button>
    </div>
  </div>
</form>

<script>
	$('input[name="Tipo"]').change(function () {
		if($("#Empresa").is(':checked')) {
			$('#Idsiliamb').attr('required', true);
		} else {
			$('#Idsiliamb').removeAttr('required');
		}
	});
</script>  

<style>
#Idsiliamb[required] {
    background: #FFAAAA;
}
</style>

Answer 1

The id Empresa does not exist, he is a value. So you can check by value radio:

$('input[name="Tipo"]').change(function () {
   if(this.value == "Empresa") {
      $('#Idsiliamb').attr('required', true);
   } else {
      $('#Idsiliamb').removeAttr('required');
   }
});

You can even wear a ternary:

$('input[name="Tipo"]').change(function () {
   $('#Idsiliamb').attr('required', this.value == "Empresa" ? true : false);
});

Example:

$('input[name="Tipo"]').change(function () {
   $('#Idsiliamb').attr('required', this.value == "Empresa" ? true : false);
});

#Idsiliamb[required] {
    background: #FFAAAA;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form-horizontal"  method="POST" action="index.php?cmd=addter2" > 


   <div class="form-group">
    <label class="control-label col-sm-4" for="Idsiliamb"> Idsiliamb </label>
    <div class="col-sm-6"> 
      <input type="text" class="form-control" id="Idsiliamb" placeholder="Digite o Idsiliamb" name="Idsiliamb" onclick="document.getElementById('Empresa').checked=true">
    </div>
  </div>

   <div class="form-group">
    <label class="control-label col-sm-4" for="Tipo"> Tipo  </label>
    <div class="form-group">
    <input type="radio" name="Tipo" id='radio_r' value="Empresa" onclick="document.getElementById('Idsiliamb').focus()" required>Empresa
    <input type="radio" name="Tipo" id='radio_p' value="Particular" >Particular
    </div>


  </div>



  <br>
  <div class="form-group"> 
    <div class="col-sm-offset-4 col-sm-6">
      <button type="submit" class="btn btn-default">Adicionar Terceiros </button>
    </div>
  </div>
</form>

Answer 2

You have to take the selected value in radio, then in JS you put if($('#radio_r:checked').val() == 'Empresa') { that will work