将 JQuery 验证扩展到 DIV [重复]

Question

我已经为此苦苦挣扎了一段时间，所以我想寻求帮助。

我有一个充满复选框的 div，我需要验证是否至少选中了一个复选框。

<div data-val="true" data-type="list-checkbox">
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
</div>

有没有办法使用“jQuery.validator.addMethod”向特定的 DIV 添加验证？我认为如果我可以添加一个函数来验证，而不是在提交表单之前注入一个 javascript 来验证，那会更干净。

我尝试过这样的事情：

jQuery.validator.addMethod('requiredCheckboxList', function (value, element, params) {

    var div = $(element);
    //Some code to iterate through the div and check if at least one is checked
}, 'Wops!');

但验证器的默认行为似乎不检查标记为“data-val=true”的 div

谢谢！

Answer 1

使用此插件，有一些绝对要求没有解决方法...

• 您只能验证input、textarea 和select 元素。时期。 （edit：contenteditable 属性现在在 1.15.0 版的某些元素上得到支持）
• 您可以根据需要使用div 元素构造布局，但各种数据输入必须位于<form></form> 容器内。
• 您必须在每个数据输入上都有一个唯一的name 属性。 （一组复选框被视为单个数据输入。）

这是您无需创建任何自定义方法即可实现复选框验证的方式。

HTML：

<form id="myform">
    <div data-type="list-checkbox">
        <input type="checkbox" name="foo" />
        <input type="checkbox" name="foo" />
        <input type="checkbox" name="foo" />
    </div>
    <input type="submit" />
</form>

jQuery：

$(document).ready(function() {

    $('#myform').validate({
        rules: {
            foo: {  // 'name' of the field.
                required: true
            }
        }
    });

});

演示：http://jsfiddle.net/eLa8s5e4/

---

引用OP：

“我认为如果我可以添加一个函数来验证，而不是在提交表单之前注入一个 javascript 来验证，那会更简洁。”

不确定这甚至意味着什么，“而不是注入 javascript”。不管你用 jQuery Validate 选择什么方法，你仍然需要 jQuery Validate 插件。

Answer 2

在您的 HTML div 元素上添加一个 Id 属性。然后使用 find 函数检查是否选中了该 Div 上的任何复选框。

<div id = "test" data-val="true" data-type="list-checkbox">
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
</div>

jquery

 $("#test").find('input[type=checkbox]').each(function() {
   if( $(this).is(':checked')) {
   alert("what you want"); 
  }
});  

Answer 3

保持简单

$('input[type="checkbox"]').change(function() {
    console.log(this.value); //check the value
    console.log(this.checked); //get the current state
});