Как проверить множественный выбор с помощью jquery validate и Chosen?

Я могу проверить множественный выбор с помощью jquery-validate и создал скрипту как демо. Снимите выделение, удерживая Ctrl, и нажмите на выделение, чтобы увидеть эффект.

<form id="myform">
    <select id="id_deals-1-sales_item" class="multi_select_mandatory" name="deals-1-sales_item" multiple="multiple">
    <option value="1">Hotel 3 Star</option>
    <option selected="selected" value="2">Hotel 4 Star</option>
    </select>
</form>

$(document).ready(function() {
    var validator = $('#myform').validate({
          // options
          rules: {
            "deals-1-sales_item": "required",            
        },

        //ignore: ':hidden:not("#id_deals-1-sales_item")'                                      
    });
});

Но как только я выбрал множественный выбор, он перестает работать: см. fiddle.

$('#id_deals-1-sales_item').chosen();

Во время исследования я обнаружил, что кто-то пробовал это с jquery multiselect вместо selected. Кажется, что скрытые элементы игнорируются при проверке jquery. Я попытался применить это решение, но, поскольку у Chosen разные методы, я застрял (мультиселект не существует в selected)

Есть ли здесь какой-нибудь гуру jQuery, который мог бы указать мне правильное направление? Кроме того, я бы предпочел, чтобы решение было основано на классах, а не на именах полей. Как это:

Это решение, которое я придумал на полпути. Но не знаю, как поступить с ???.

$.validator.addMethod("needsSelection", function(value, element) {
        return $(element).???.length > 0;
    });

var validator = $('#myform').validate({
});

$('#myform').find('select.multi_select_mandatory').each(function(){
        $(this).change(function(){
            $(this).valid();
        });
        $(this).rules('add', {
            needsSelection: ""
        });
    });

Решение:

С приведенным ниже решением eicto я смог создать решение на основе класса, а не на основе имени поля. Это особенно полезно, когда у вас есть динамические элементы, которые вы хотите проверить мгновенно, не отправляя ничего на сервер.

    var validator = $('#deal_modal_form').validate({
        // options
        ignore: ':hidden:not(.chzn-done)'
     });

    $('#myform').find('select.multi_select_mandatory').each(function(){
    $(this).chosen().change(function(){
        $(this).valid();
    });
    $(this).rules('add', {
        required: true,
    });
});

person Houman    schedule 23.12.2012    source источник
comment
этот пост объясняет проблему stackoverflow.com/questions/11232310/   -  person charlietfl    schedule 24.12.2012
comment
также посмотрите на этот плагин, который имеет проверку в своем API: ivaynberg.github.com/select2   -  person charlietfl    schedule 24.12.2012
comment
Спасибо, Чарли. Что касается первого комментария, предлагаемое решение отправлено. Хотя мне это срочно нужно. Дайте мне посмотреть этот плагин. Может быть, это поможет...   -  person Houman    schedule 24.12.2012
comment
Я проверил отладчик, проблема в том, что change срабатывает до того, как select на самом деле обновляет... еще хуже... он не обновляет выбранные....   -  person zb'    schedule 24.12.2012
comment
@charlietfl плагин выглядит аккуратно, но где вы видите там минимальную проверку выбора?   -  person Houman    schedule 24.12.2012
comment
@eicto смотрит на скрипку, как думаешь, сможешь раскошелиться и показать мне свою идею? Я не уверен, что следую за тобой. Спасибо   -  person Houman    schedule 24.12.2012


Ответы (2)


Это работает для меня:

$(document).ready(function() {
    var validator = $('#myform').validate({
        // options
        rules: {
            "deals-1-sales_item": "required",
        },

        ignore: ':hidden:not(.chzn-done)'
    });
    var checkerrors = function() {
        validator.form();
    };
    var chosen = $('#id_deals-1-sales_item').chosen().change(checkerrors);
});​

идея состоит в том, чтобы проверять форму вручную при каждом изменении.

ДЕМО

person zb'    schedule 23.12.2012
comment
Я задаюсь вопросом о различиях между .checkForm() и .valid(). Я не нахожу никакой документации для checkForm. - person Sparky; 24.12.2012
comment
действителен, checkForm не уверен, что это хорошая идея использовать checkForm, но это действительно другой метод, valid не проверяет сами данные формы, а checkForm делает - person zb'; 24.12.2012
comment
Я не говорю, что один способ лучше другого, поскольку я не знаком с checkForm(). Однако valid() возвращает логическое значение true/false относительно того, проходит ли форма проверку. Как он мог это сделать, если не проверял сами данные формы? Это также вызывает любые применимые сообщения об ошибках, почти как submit без отправки. - person Sparky; 24.12.2012
comment
@Sparky .valid не работает в этом случае, потому что не вызывает проверку - person zb'; 24.12.2012
comment
.form также работает, но делает даже больше, чем .checkForm, поэтому я не уверен, что правильно используйте это здесь - person zb'; 24.12.2012
comment
@Sparky valid: function() {return this.size() === 0;}, size: function() {return this.errorList.length;}, о каком триггере ты говоришь? он просто возвращает текущее состояние. - person zb'; 24.12.2012
comment
Цитата eicto: о каком триггере вы говорите? ~ Пожалуйста, посмотрите этот jsFiddle. - person Sparky; 24.12.2012
comment
давайте продолжим это обсуждение в чате - person zb'; 24.12.2012
comment
Я просто хотел узнать разницу между двумя методами для собственного назидания. Если вы не знаете, как объяснить, это нормально, потому что я тоже не знаю. Однако я очень хорошо знаком с тем, как работает .valid()... и просто говорю, что он не проверяет данные формы не кажется точным. - person Sparky; 24.12.2012
comment
@Sparky Я объяснил в чате - person zb'; 24.12.2012
comment
@eicto у тебя действительно все работает. Шедевр. Мне удалось создать решение на основе классов из вашего решения, которое я добавляю в качестве редактирования вопроса. Большое спасибо. +1 - person Houman; 24.12.2012

Я написал свое решение с помощью решений @eicto и @kave следующим образом:

 $.validator.addMethod("multiSelectRequired", function (value, element) {
    return element.length > 0;
});
$("#aspnetForm").find('select.multi_select_mandatory').each(function () {
    $(this).change(function () {
        $(this).valid();
    });

    $(this).rules('add', {
        'multiSelectRequired': true
    });
});

При инициализации плагина я добавляю `ignoe:[], чтобы не игнорировать скрытый ввод при проверке.

Я использую специальный плагин для своего проекта начальной загрузки, называемый bootstrap-multiselect, для отображения выбора флажков - https://github.com/davidstutz/bootstrap-multiselcet

person Samih A    schedule 28.11.2013