jQuery复选框验证在引导模式中不起作用

Question

我有一个带有选择字段和复选框列表的表单。复选框位于模式中，当单击按钮时会打开。 jQuery 验证适用于模式之外的选择，但不适用于复选框。

<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>

这里是 jQuery 验证

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

当我提交表单时，它只会抱怨选择字段，但即使未选中复选框也会提交。我尝试将复选框放在模式之外，它工作正常。但我需要他们在模态中工作。这可能吗？

Answer 1

假设您的复选框元素已经存在，但只是在弹出模式之前隐藏，您需要通过ignore 选项启用隐藏元素的验证。

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

（编辑：虽然当模式弹出时它们不再隐藏，所以这应该在不设置 ignore 选项的情况下工作。）

---

我的回答假设当 Modal 被构建时，它仍然在 <form> 容器内。但是，您需要在 Modal 打开的情况下检查您的 DOM。如果它不在您的 <form> 容器中，我们将需要您构建一个 jsFiddle 演示，以便我们解决这个问题。您还需要显示打开和关闭模式的代码。

Answer 2

您的规则与您的元素名称不匹配。改为：

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

另外，您的表单标签缺少引用 "，这可能会破坏一切。

更新：我修复了您的语法错误并使您的验证工作：FIDDLE