How to make a textbox required based on div visibility of dropdown selection?

Question

With the code below I show or hide two divs based on dropdown selection. My question is how can I make the div thar is shown to have the textbox required ?

$(document).ready(function(){
    $("#europerkg").hide();
    $("#flatfee").hide();
    $('#rate').on('change', function() {
        if (this.value == '1') {
            $("#europerkg").show();
            $("#flatfee").hide();
        }

        if (this.value == '2') {
            $("#europerkg").hide();
            $("#flatfee").show();
        }

        if (this.value == '3') {
            $("#europerkg").show();
            $("#flatfee").show();
        }
    });
});

<div class="col-md-3" id="europerkg">
    <label class="form-label">&euro; / kg</label>
    <input name="europerkg" id="europerkg" type="text" class="form-control" placeholder="">
</div>
<div class="col-md-3" id="flatfee">
    <label class="form-label">Flat Fee</label>
    <input name="flatfee" id="flatfee" type="text" class="form-control" placeholder="">
</div>

Do you mean HTML5 required, or using a library such as jquery validation? If the latter, please add the appropriate tag to the question — Rhumborl, Dec 15 '14 at 11:16

score 1 · Accepted Answer · answered Dec 15 '14 at 11:26

First of all you cannot have same IDs for different elements, Here for div tag and input tag you have used same ID,

Please check the modified code where I have changed the IDs of the elements and also have added code for required.

$(document).ready(function(){
$("#europerkg").hide();
        $("#flatfee").hide();
    $('#rate').on('change', function() {
      if ( this.value == '1')
      {
        $("#europerkg").show();
        $("#flatfee").hide();
        $("div input[id = 'europerkgtxt']").attr('required','required');
      }
      if ( this.value == '2')
      {
        $("#europerkg").hide();
        $("#flatfee").show();
       $("div input[id = 'flatfeetxt']").attr('required','required');
      }
            if ( this.value == '3')
      {
        $("#europerkg").show();
        $("#flatfee").show();
        $("div input[id = 'europerkgtxt']").attr('required','required');
        $("div input[id = 'flatfeetxt']").attr('required','required');

      }
    });
});

<div class="col-md-3" id="europerkg">
<label class="form-label">&euro; / kg</label>
<input name="europerkg" id="europerkgtxt" type="text" class="form-control" placeholder=""  >
</div>
<div class="col-md-3" id="flatfee">
<label class="form-label">Flat Fee</label>
<input name="flatfee" id="flatfeetxt" type="text" class="form-control" placeholder=""  >
</div>

score 1 · Answer 2 · edited May 23 '17 at 11:57

To add the required to an input see this

In your case, the code should be:

$(document).ready(function(){
    $("#europerkg").hide();
    $("#flatfee").hide();

    $('#rate').on('change', function() {
      if ( this.value == '1')
      {
        $("#europerkg").show();
        $("#europerkg").prop('required',true);
        $("#flatfee").hide();
        $("#flatfee").prop('required',false);
      }
      if ( this.value == '2')
      {
        $("#europerkg").hide();
        $("#europerkg").prop('required',false);
        $("#flatfee").show();
        $("#flatfee").prop('required',true);
      }
            if ( this.value == '3')
      {
        $("#europerkg").show();
        $("#europerkg").prop('required',true);
        $("#flatfee").show();
        $("#flatfee").prop('required',true);
      }
    });
});

score 0 · Answer 3 · answered Dec 15 '14 at 11:43

Based on Meghana's answer, you have to remove the required attribute as well. Otherwise, both texts could have the required attribute, in case of the user changes the rate more than one time.

$(document).ready(function(){
  $("#europerkg, #flatfee").hide();

  $('#rate').on('change', function() {

    $("#europerkgtxt, #flatfeetxt").removeAttr('required');

    if ( this.value == '1') {
       $("#europerkg").show();
       $("#flatfee").hide();
       $("#europerkgtxt").attr('required','required');
    }

    if ( this.value == '2')
    {
       $("#europerkg").hide();
       $("#flatfee").show();
       $("#flatfeetxt").attr('required','required');
    }

    if ( this.value == '3')
    {
       $("#europerkg").show();
       $("#flatfee").show();
       $("#europerkgtxt").attr('required','required');
       $("#flatfeetxt").attr('required','required');
    }
  });
});

How to make a textbox required based on div visibility of dropdown selection?

3 Answers3