Проверка JQuery в группе флажков с использованием класса

Question

Мой вопрос очень похож на jQuery Validation с использованием класса вместо значения имени 1 .Я хочу проверить группу флажков, так что по крайней мере один должен быть проверен.По умолчанию установлены оба флажка, но я хочу убедиться, что пользователь не снимает оба флажка.Флажки

    <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>
    </div>

У меня есть jquery:

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

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

});

Однако это работает не совсем так, как ожидается.Если я не установлю ни один из полей или только второй (мобильный), форма не будет отправлена, и я получу сообщение об ошибке в первом.Что я делаю не так?

Answer 1

Я не уверен, что буду использовать jQuery Validation для чего-то подобного, но если вы просто хотите убедиться, что в любой группе установлен хотя бы один флажок (будь то класс или любой другой атрибут), вы можете просто проверить длину любого правильного селектора.

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

EDIT

Без использования проверки вы можете остановить отправку, выполнив что-то вроде:

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

Answer 2

Если вы используете плагин jQuery Validation, вы можете настроить свой HTML следующим образом:

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

Вы должны добавить опции "message" и "rules" к проверке формы. Используйте «зависит» свойство, чтобы настроить условный тест, который будет проверять наличие отмеченных флажков.

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