jQuery checkbox validation not working inside bootstrap modal

Question

I have a form with a select field and a list of checkboxes. The checkboxes are inside a modal which opens up when a button is clicked. jQuery validation works for select which is outside the modal but not for the checkboxes.

<form id="my_form>
    <div class="form-group">
    <label for="codes" class="control-label">Codes: </label>
        <select id="codes" name="codes" class="form-control required">
          <option value="code1">Code 1</option>
          <option value="code2">Code 2</option>
        </select>
    </div>

    <div class="bottom-margin10">
      <button class="btn btn-primary" data-toggle="modal" data-target="#my-modal"><span></span><span>Select Value Set Names</span></button>
    </div>

    <div class="modal fade" id="my-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
           <div class="modal-dialog">
                <div class="modal-content">
                     <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
                        <h4 class="modal-title" id="myModalLabel">Value Set Names</h4>
                    </div>
                   <div class="modal-body">

                     <div class="checkbox-inline">
                       <label for="new-code">Please Select Value Set Names</label> 
                       <input type="checkbox" name="valueSetIds[]" value="1">Problems<br>
                       <input type="checkbox" name="valueSetIds[]" value="2">Medications<br>
                       <input type="checkbox" name="valueSetIds[]" value="3">Information

                    </div>                                                      
               </div>
               <div class="modal-footer">
                  <button id="btn_cancel_valuesetname" type="button" class="btn btn-default" style="margin: 0 10px 0 0;" 
                                     data-dismiss="modal"  aria-hidden="true">Cancel</button>
                  <button type="savevaluesetname"  class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Save</button>
              </div>
         </div>
       </div>
     </div>
</form>

Here is jQuery validation

$("#my_form").validate({
      rules: {
          'valueSetIds[]': {
              required: true
          }
       }
});

When i submit form it only complains for select field, but submits even if checkbox was not selected. I tried this putting the checkboxes outside the modal and it works fine. But i need them to be working inside the modal. Is that possible?

Answer 1

Assuming your checkbox elements already exist, but are simply hidden until the modal pops up, you need to enable the validation of hidden elements through the ignore option.

$("#my_form").validate({
    ignore: [],  // <-- allows for validation of hidden fields
    rules: {
        'valueSetIds[]': {
            required: true
        }
    }
});

(EDIT: although when the modal pops up they're not hidden any more so this should have worked without setting the ignore option.)

---

My answer assumes that when the Modal is constructed it is still inside of the <form> container. However, you'll need to inspect your DOM with the Modal open. If it's not inside your <form> container, we'll need you to construct a jsFiddle demo so we can figure this out. You'll also need to show the code that opens and closes the modal.

Answer 2

Your rules don't match your element name. Change to:

$("#my_form").validate({
      rules: {
          'valueSets[]': {
              required: true
          }
       }
});

Also, your form tag is missing quotation " which will probably break everything.

UPDATE: I fixed your syntax errors and made your validation work: FIDDLE