Question

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

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

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

有没有办法使用＆＃34; jQuery.validator.addMethod＆＃34;为该特定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!');

但似乎valitator的默认行为不会检查标记为＆＃34的div：data-val = true＆＃34;

谢谢！

Answer 1

有了这个插件，有一些绝对要求，没有解决方法...

您只能验证input，textarea和select元素。期。自版本1.15.0起，某些元素现在支持（编辑：contenteditable属性
您可以根据需要使用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
            }
        }
    });

});

DEMO：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
});

将JQuery验证扩展到DIV

3 个答案: