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
– Rhumborl, Commented Dec 15, 2014 at 11:16

M3ghana · Accepted Answer · 2014-12-15 11:26:53Z

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>

Community · Accepted Answer · 2017-05-23 11:57:52Z

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);
      }
    });
});

Everton Lenger · Accepted Answer · 2014-12-15 11:43:04Z

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');
    }
  });
});

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related