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中键入某个名称，此表单仍然可以提交，如果我没有键入任何名称但是请检查复选框，此表单也可以提交。 / p>

Answer 1

只有在未选中任何复选框的情况下，才能通过在文本框上设置规则来实现此目的。这使用required specification that takes a function as a parameter的类型。

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

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

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

完整的脚本位于and in this fiddle

下方

$(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

参考你的小提琴

您可以像为消息

添加的验证一样以相同的方式添加它

e.g。

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

Answer 3

可能会有效

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

jquery验证复选框或输入字段

3 个答案: