0

我有一个可以发送消息的表单，用户需要从复选框中选择组或手动输入组名。现在我想验证这个表单，如果用户没有选中任何复选框或在文本字段中插入任​​何值，这个表单就不能提交。

下面是我的表单，这是我的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，如果我不键入任何名称但选中复选框，此表单也可以提交。

4

3 回答 3

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();
    });
});
于 2013-02-27T14:37:04.450 回答
0

参考你的小提琴

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

例如

"group_list[]": {required:true}...
于 2013-02-27T09:18:40.967 回答
0

可能这会奏效

 $("#submit").click(function(){
        if($('#myform input:checked').length >= 1 || $("#manual_group").val() !=""){
           return true  ;
        }
       return false;   
    }
于 2013-02-27T09:22:13.563 回答