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选项。）

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

Answer 2

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

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

此外，您的表单标记缺少引号"，这可能会破坏所有内容。

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

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

2 个答案: