jQuery验证复选框或输入字段

Question

我有一个可以发送消息的表格，用户需要从复选框中选择组或手动输入组名称。 现在，我想验证此表单，如果用户未选中任何复选框或在文本字段中插入任​​何值，则此表单无法汇总。

下面是我的表单，这是我的jsfiddle （已验证textarea）。

<form action="" method="post" name="myform" id="myform">

   <input type="checkbox" name="group_list[]" value="1" />Group 1<br />
   <input type="checkbox" name="group_list[]" value="1" />Group 1<br />
   <input type="checkbox" name="group_list[]" value="1" />Group 1<br />
   <input type="checkbox" name="group_list[]" value="1" />Group 1<br />

   <input type="text" name="manual_group" value="" placeholder="Group Name" /><br />

   <textarea name="message" placeholder="Your Message"></textarea> <br />

   <input type="submit" name="submit" value="Send Message" />

</form>

用户需要在提交之前选中复选框或插入组名之一。所以问题是如何为该规则创建条件？

*请记住，如果我不选中其中一个复选框，但在manual_group中manual_group某些名称，此表格仍可以提交，如果我不键入任何名称但选中复选框，则此表格也可以manual_group 。

Answer 1

您可以通过在文本框上设置一个仅在未选中任何复选框的情况下才需要的规则来实现此目的。 这使用将函数作为参数的必需规范的类型。

rules: {
    manual_group: {
        required: function () {
            return $('[name=group_list\\[\\]]:checked').length === 0;
        }
    }
}

您需要做的另一件事是，当复选框或文本框更改时，强制重新验证。 我是这样做的

$('form input').on('click focusin focusout keyup', function () {
    $('form').validate().form();
});

完整的脚本在下面， 在这个小提琴中

$(function () {

    $("form").validate({
        rules: {
            manual_group: {
                required: function () {
                    return $('[name=group_list\\[\\]]:checked').length === 0;
                }
            }
        },
        messages: {
            manual_group: "Please check a checkbox or fill in this field"
        },
        submitHandler: function () {
            alert('form ok');
        }
    });


    $('form input').on('click focusin focusout keyup', function () {
        $('form').validate().form();
    });
});

Answer 2

参考你的小提琴

您可以用与添加验证消息相同的方式添加它

例如

"group_list[]": {required:true}...

Answer 3

也许这会工作

 $("#submit").click(function(){
        if($('#myform input:checked').length >= 1 || $("#manual_group").val() !=""){
           return true  ;
        }
       return false;   
    }