jQuery validate text only if a specific radio buttons are selected

Question

I need that a field text is required ONLY if certain radio buttons are selected: In this case only if "Resp. Inscripto", "Iva Exento" or "Monotributo" values are selected (any of them). If someone selects "Consumidor Final" then the text input is not required.

I am using this code but it doesnt work.

What am I doing wrong?

    <script type="text/javascript">

    $(function(){

        $('#form1').validate({

  rules: {
    contrato_cuit: { 
     required: '#contrato_cuittipo[value="Resp. Inscripto"]:checked'
    },
    contrato_cuit: { 
     required: '#contrato_cuittipo[value="IVA Exento"]:checked'
    },
    contrato_cuit: { 
     required: '#contrato_cuittipo[value="Monotributo"]:checked'
    }
  }         

        });
    })
</script>

<form name="form1" id="form1" method="post" action="xxxx.php" encType="multipart/form-data" >

CUIT
<input type="text" value='' name="contrato_cuit" id="contrato_cuit">

Resp. Inscripto
<input name="contrato_cuittipo" id="contrato_cuittipo_r" type="radio" value="Resp. Inscripto" required checked="checked" />

Monotributo
<input name="contrato_cuittipo" id="contrato_cuittipo_m" type="radio" value="Monotributo" required /> 

IVA Exento
<input name="contrato_cuittipo" id="contrato_cuittipo_i" type="radio" value="IVA Exento" required /> 

Consumidor Final
<input name="contrato_cuittipo" id="contrato_cuittipo_c" type="radio" value="Consumidor Final" required />

<input type="submit" name="button" id="btnsubmit" value=" ENVIAR "/> 

</form>

Thanks, Francisco

Can you be more specific than 'it doesn't work'? What is happening and what would you like it to do? — MMAdams, Jan 19 '18 at 20:23
You can't repeat ids. https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page Fix that and try to find the elements by either a class or their name. Or use the unique id that you give them for each required check. — Taplar, Jan 19 '18 at 20:29
Hi! I just want that if someone checks "Resp. Inscripto" or "Monotributo" or "IVA Exento" then the input text "contrato_cuit" is required. if someone checks "Consumidor Final" then the input text "contrato_cuit" is not required. — Milhouse, Jan 19 '18 at 20:29
Possible duplicate of [Does ID have to be unique in the whole page?](https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page) — Taplar, Jan 19 '18 at 20:33
Hi, Thanks for your replies. I have changed IDs so they are unique and it doesn´t work :( — Milhouse, Jan 19 '18 at 20:36

score 0 · Answer 1 · answered Jan 19 '18 at 22:21

You can take advantage of the fact that jQuery .validate() won't try to validate a disabled input.

So on click on a radio, check if it's the one having the value Consumidor Final.

If it is, then just disable the text input. Enable it if not.

$(function(){

  $("#form1").validate();
  
  $("#form1 input[type='radio']").on("click",function(){
    if($(this).val()=="Consumidor Final"){
      console.log("Text input disabled");
      $("#contrato_cuit").prop("disabled",true);
    }else{
      console.log("Text input enabled");
      $("#contrato_cuit").prop("disabled",false);
    }
  });
  
});

.error{
  font-size:1.4em;
  color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>


<form name="form1" id="form1" method="post" action="xxxx.php" encType="multipart/form-data" >

  CUIT
  <input type="text" value='' name="contrato_cuit" id="contrato_cuit" required>

  Resp. Inscripto
  <input name="contrato_cuittipo" id="contrato_cuittipo_r" type="radio" value="Resp. Inscripto" required checked="checked" />

  Monotributo
  <input name="contrato_cuittipo" id="contrato_cuittipo_m" type="radio" value="Monotributo" required /> 

  IVA Exento
  <input name="contrato_cuittipo" id="contrato_cuittipo_i" type="radio" value="IVA Exento" required /> 

  Consumidor Final
  <input name="contrato_cuittipo" id="contrato_cuittipo_c" type="radio" value="Consumidor Final" required />

  <input type="submit" name="button" id="btnsubmit" value=" ENVIAR "/> 

</form>

jQuery validate text only if a specific radio buttons are selected

1 Answers1