Adding required to HTML input when checkbox is checked

Question

I have an hidden div which will contain some HTML inputs which some are needed to be required as part of a form. the div is visible by checking the checkbox and the code looks like this:

$(function() {
  var checkbox = $("#checkbox01");
  var hidden = $("#div01");
  hidden.hide();
  checkbox.change(function() {
    if (checkbox.is(':checked')) {
      hidden.show();
    } else {
      hidden.hide();
      $("#username").val("");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label><input id="checkbox01" name="checkbox01" type="checkbox">show/hide</label>
<div id="div01">
  <input name="username" type="text" required>
</div>

You can see the code in action on JSfiddle As you can see the div is hidden when the checkbox is unchecked and also the username is cleaned when the div is hidden (checkbox unchecked).

How can I make the required be added to HTML only if checkbox is checked, so user won't get prompt to enter value when the div is hidden by Jquery... ?

Milan Chheda · Accepted Answer · 2017-07-09 06:34:02Z

1

you can use .prop() to added required attribute to input everytime you show it and remove the attribute everytime you hide it.

$(function() {
  var checkbox = $("#checkbox01");
  var hidden = $("#div01");
  hidden.hide();
  checkbox.change(function() {
    if (checkbox.is(':checked')) {
      hidden.show();
      $('#username').prop('required', true); //to add required
    } else {
      hidden.hide();
      $("#username").val("");
      $('#username').prop('required', false); //to remove required
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label><input id="checkbox01" name="checkbox01" type="checkbox">show/hide</label>
<div id="div01">
  <input name="username" type="text" required>
</div>

edited Jul 9, 2017 at 6:34

Milan Chheda

8,2593 gold badges23 silver badges35 bronze badges

answered Jul 9, 2017 at 5:55

Dij

9,8184 gold badges21 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

adeneo · Accepted Answer · 2017-07-09 06:04:41Z

You could just toggle the type to hidden, that way it's no longer required

$("#checkbox01").on('change', function() {
    $("#div01").toggle(this.checked)
               .find('input').prop('type', this.checked ? 'text' : 'hidden')
               .val('');
    }).trigger('change');

$(function() {
  $("#checkbox01").on('change', function() {
    $("#div01").toggle(this.checked).find('input').prop('type', this.checked ? 'text' : 'hidden').val('');
  }).trigger('change');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <label>
    <input id="checkbox01" name="checkbox01" type="checkbox">show/hide</label>
  <div id="div01">
    <input name="username" type="text" required="required">
  </div>
  <input type="submit">
</form>

Dinesh undefined · Accepted Answer · 2017-07-09 05:53:42Z

0

Add required attribute on check and remove it when unchecked.

    $(function() {
      var checkbox = $("#checkbox01");
      var hidden = $("#div01");
      hidden.hide();
      checkbox.change(function() {
        if (checkbox.is(':checked')) {
          hidden.show();
          $("#name").attr('required'); //add required attr
        } else {
          hidden.hide();
          $("#username").val("");
          $("#name").removeAttr('required'); // remove required attr
        }
      });
    });

Here is your fiddle https://jsfiddle.net/xj7ps2La/

answered Jul 9, 2017 at 5:53

Dinesh undefined

5,5262 gold badges22 silver badges41 bronze badges

Comments

J Shubham · Accepted Answer · 2017-07-09 05:55:29Z

0

Update your js to this:

    $(function() {
          var checkbox = $("#checkbox01");
          var hidden = $("#div01");
          hidden.hide();
          checkbox.change(function() {
            if (checkbox.is(':checked')) {
              checkbox.attr("required",true);
              hidden.show();
            } else {
              hidden.hide();
              checkbox.attr("required",false);
              $("#username").val("");
            }
          });
        });

answered Jul 9, 2017 at 5:55

J Shubham

6097 silver badges22 bronze badges

Comments

Milan Chheda · Accepted Answer · 2017-07-09 06:31:04Z

0

Try this: (JavaScript)

$(function() {
  var checkbox = $("#checkbox01");
  var hidden = $("#div01");
  hidden.hide();
  checkbox.change(function() {

    if (checkbox.is(':checked')) {
      hidden.show();

      document.getElementById("username").required = true;
    } else {
      hidden.hide();
      $("#username").val("");
      document.getElementById("username").required = false;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input id="checkbox01" name="checkbox01" type="checkbox">show/hide</label>
<div id="div01">
  <input name="username" id="username" type="text">
</div>

jQuery

$("#username").prop('required',true);          //to add
$("#username").prop('required',false);         //to remove

edited Jul 9, 2017 at 6:31

Milan Chheda

8,2593 gold badges23 silver badges35 bronze badges

answered Jul 9, 2017 at 5:52

Atlas_Gondal

2,5622 gold badges17 silver badges25 bronze badges

Collectives™ on Stack Overflow

Adding required to HTML input when checkbox is checked

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related