开发者

jQuery validation on a checkbox group using class

My question is very similar to jQuery Validation using the class instead of the name value1. I want to validate a checkbox group, such that at least one needs to be checked. By default, both checkboxes are checked, but I want to ensure the user doesn't uncheck both. The checkboxes are

    <div>
    <input type="checkbox" class="channel" name="web" checked />
    <label for="web" class="check">Web</label>
    <input type="checkbox" class="channel" name="mobile" checked />
    <label for="mobile" class="check">Mobile</label>
    &l开发者_StackOverflow中文版t;/div>

The jquery I have is:

$("#searchForm").validate({
    rules:{
            ...
            ...
            ...
    }
});

$(".channel").rules("add", {  
    required: true, 
     minlength: 1

});

However, this doesn't work quite as expected. If I check neither of the boxes or only the second one (mobile), the form won't submit and I get an error message on the first one. What am I doing wrong?


I'm not sure if I'd use jQuery Validation for something like this, but if you just want to make sure that there is at least one checked checkbox in any group (whether that be class, or any other attribute), you can just check the length of any proper selector.

if ($('.channel:checked').length == 0) {
    // validation fails
}

EDIT

Without using Validation, you can stop the submit by doing something like:

$('form').submit(function(e){
    if ($('.channel:checked').length == 0) {
        // validation fails, so stop submit
        e.preventDefault();
    }
});


If you are using the jQuery plugin Validation, you can set up your HTML like this:

<form class="commentForm" method="get" action="">
    <fieldset>
        <p>
            <label for="transportation">Transportation</label>
            <input class="ccheckbox" type="checkbox" name="transportation" value="Bike">I have a bike <br />
            <input class="ccheckbox" type="checkbox" name="transportation" value="Car">I have a car <br />
            <input class="ccheckbox" type="checkbox" name="transportation" value="Walk">I walk
        </p>
        <p>
            <input class="submit" type="submit" value="Submit"/>
        </p>
    </fieldset>
</form>

You should add the "message" and the "rules" options to your form validation. Use the "depends" property to set up a conditional test that will test for the presence of checked boxes.

        $(".commentForm").validate({
            messages: {
                transportation: {
                    required: "How do you get around?"
                },
            },
            rules: {
                transportation:{
                    required: {
                        depends: function(element) {
                            return $('input[name="transportation"]:checked').length == 0;
                        }
                    }
                }               
            }
        });
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜