Have combobox a required field only if checkbox is clicked

Question

I Have a checkbox, which displays a hidden combobox when checked. When I submit the form and the checkbox is unpressed (combobox is still hidden) it still has the hidden combobox as a 'required' field. Here is my code:

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
   <input type="checkbox" name="hascustpo" value="True" id="hascustpo"/>
   Has Customer PO
 </label><br>
<div id="custpo">
  <label>Customer PO Number <b style="color:red;">*</b></label>
  <select id="txtfield" style="width: 200px;" name="custpo" class="inputvalues" required>
    <option disabled selected>-- Customer PO Number</option>
    <option>AUTO PO NUM | DESCRIPTION</option>
  </select>
  <br>
</div>

try use checkbox.removeAttr("required"); instead checkbox.attr("required",false); — Emiliano, Jul 04 '18 at 13:59

Lars-Olof Kreim · Accepted Answer · 2018-07-05T06:18:54.990

1

First of all i guess you want to set the required for the hidden element, not the checkbox.

Secondly you should better use prop for this :) http://api.jquery.com/prop/

An other way would be removeAttr but prop is better for your case. See .prop('checked',false) or .removeAttr('checked')?

        $(function() {
          var checkbox = $("#hascustpo");
          var hidden = $("#custpo");
          var input = $("#txtfield");
          hidden.hide();
          checkbox.change(function() {
              if (checkbox.is(':checked')) {
                  input.prop("required", true);
                  hidden.show();
              } else {
                  hidden.hide();
                  input.prop("required", false);
              }
          });
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<label>
       <input type="checkbox" name="hascustpo" value="True" id="hascustpo"/>
       Has Customer PO
     </label><br>
     <div id="custpo">
       <label>Customer PO Number <b style="color:red;">*</b></label>
         <select id="txtfield" style="width: 200px;" name="custpo" class="inputvalues" required>
           <option disabled selected>-- Customer PO Number</option>
           <option>AUTO PO NUM | DESCRIPTION</option>
         </select>
         <br>
     </div>
     <button type="submit">Submit</botton>
</form>

Browser validates Select element if it is visible:

edited Jul 05 '18 at 06:18

answered Jul 04 '18 at 13:58

Lars-Olof Kreim

280
1
8

This gets me passed the issue that it wont submit when it wasn't checked. But now when the checkbox is pressed and it shows the hidden combobox, if i dont select an option it still submits the form when it should give the notification "Please select an item from this list" – David Jul 04 '18 at 14:08
I just added an Submit button in my answer... for me it validates the selectbox as soon it is shown (in which browser are you testing?) – Lars-Olof Kreim Jul 04 '18 at 15:11
@Lars_OlofKreim It will let me click submit without it stopping me. I am using chrome and tested it on IE as well. I made a seperate page also with just the snippet you provided but it lets me press submit even without picking an option. – David Jul 04 '18 at 15:40
[example](https://www.google.de/search?q=please+fill+out+this+field&rlz=1C1CHBF_en__803__803&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiPxJfS5IXcAhXB34MKHan_BE4Q_AUICigB&biw=1920&bih=947#imgrc=rxy60YEfL7q6aM:) – David Jul 04 '18 at 15:44
Strange exactly this validation is shown when i test my code – Lars-Olof Kreim Jul 04 '18 at 20:08
see my edited answer (i added an screenshot), are you sure you have no value at the default state of the select element (otherwise it would be always filled). I've still the opinion it is better to use browser functionality than custom js validation – Lars-Olof Kreim Jul 05 '18 at 06:20
Yes, you're solution would be more ideal. when I submit without selecting from the combobox, the browser puts `/test.php?hascustpo=True` at the end of the domain. I still can't figure out why this doesnt function properly – David Jul 05 '18 at 12:18
I got this working now. It must've been some incompatibility with my other code. I have marked this as the correct answer as it is more desirable of an answer. – David Jul 11 '18 at 14:51

score 1 · Answer 2 · answered Jul 04 '18 at 15:41

You need a function to detect when the form is submitted and check the value of the combo box when the checkbox is ticked:

$(function() {
  var checkbox = $("#hascustpo");
  var hidden = $("#custpo");
  hidden.hide();
  checkbox.change(function() {
    if (checkbox.is(':checked')) {
      checkbox.attr("required", true);
      hidden.show();
    } else {
      hidden.hide();
      checkbox.attr("required", false);
    }
  });
  
  $("form").submit(function (e) {
    if($("#hascustpo").is(':checked') && $("#custpo option:selected" ).val() == 0){
      e.preventDefault();
      alert("Please select an item from this list");
    }
    
  });
});

<form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
   <input type="checkbox" name="hascustpo" value="True" id="hascustpo"/>
   Has Customer PO
 </label><br>
<div id="custpo">
  <label>Customer PO Number <b style="color:red;">*</b></label>
  <select id="txtfield" style="width: 200px;" name="custpo" class="inputvalues" required>
    <option value="0" disabled selected>-- Customer PO Number</option>
    <option value="1">AUTO PO NUM | DESCRIPTION</option>
  </select>
  <br>
</div>
     <button type="submit">Submit</botton>
</form>

Awesome, it works great but I also have other text boxes on my form as well and when the checkbox isnt pressed it hides everything under "Has Customer PO" Im not great at javascript but how would i correct this? — David, Jul 04 '18 at 16:38
@Jordan this is because it is inside the div
if you don't want to hide the text boxes then move them outside this div or you can create another div inside this div custpo with only the controls that you want to hide — mbadeveloper, Jul 05 '18 at 08:00

Have combobox a required field only if checkbox is clicked

2 Answers2