Использование зависит от плагина jQuery Validation

Question

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

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

Когда я нажимаю флажок и отключаю текстовое поле, я по-прежнему получаю ошибку недопустимого поля, несмотря на добавленное в правила предложение depends (см. Код ниже). Как ни странно, на самом деле происходит то, что сообщение об ошибке отображается в течение доли секунды, а затем исчезает.

Вот пример списка флажков и текстовых полей:

<ul id="ItemList">
<li>
    <label for="OneSelected">One</label><input id="OneSelected" name="OneSelected" type="checkbox" value="true" />
    <input name="OneSelected" type="hidden" value="false" />
    <input disabled="disabled" id="OneValue" name="OneValue" type="text" />
</li>
<li>
    <label for="TwoSelected">Two</label><input id="TwoSelected" name="TwoSelected" type="checkbox" value="true" />
    <input name="TwoSelected" type="hidden" value="false" />
    <input disabled="disabled" id="TwoValue" name="TwoValue" type="text" />
</li>
</ul>

А вот код jQuery, который я использую

//Wire up the click event on the checkbox
jQuery('#ItemList :checkbox').click(function(event) {
    var textBox = jQuery(this).siblings(':text');
    textBox.valid();
    if (!jQuery(this).attr("checked")) {
        textBox.attr('disabled', 'disabled');
        textBox.val('');
    } else {
        textBox.removeAttr('disabled');
        textBox[0].focus();
    }
});

//Add the rules to each textbox
jQuery('#ItemList :text').each(function(e) {
    jQuery(this).rules('add', {
        required: {
            depends: function(element) {
                return jQuery(element).siblings(':checkbox').attr('checked');
            }
        },
        number: {
            depends: function(element) {
                return jQuery(element).siblings(':checkbox').attr('checked');
            }
        }
    });
});

Игнорировать скрытое поле в каждом li, оно там, потому что я использую asp.net MVC Html.Checkbox метод.

Answer 1

Использование опции «игнорировать» (http://docs.jquery.com/Plugins/Validation/validate#toptions) может быть самым простым способом для вас справиться с этим. Зависит от того, что еще у вас есть в форме. Например, вы не будете фильтровать отключенные элементы, если вы были другие элементы управления, которые были отключены, но вам все равно нужно было проверить по какой-то причине. Однако, если этот маршрут не работает, использование дополнительного класса для фильтрации (добавление и удаление с вашими флажками) должно привести вас туда, куда вы хотите перейти , но проще.

т.е.

        $('form').validate({
            ignore: ":disabled",
            ...
        });

Answer 2

Обычно, когда я это делаю, я пропускаю «зависит» и просто использую правило required jQuery Validate и позволяю ему обрабатывать проверку, основанную на данном селекторе, в отличие от разделения логики между правилами проверки и обработчиком щелчков флажка. , Я собрал быстрое демо того, как я это делаю, используя вашу разметку.

Действительно, сводится к required:'#OneSelected:checked'. Это делает данное поле обязательным, только если выражение истинно. В демоверсии, если вы отправляете страницу сразу, она работает, но когда вы ставите флажки, форма не может быть отправлена ​​до тех пор, пока отмеченные поля не будут заполнены какими-либо данными. Вы все еще можете поместить вызов .valid() в обработчик щелчков, если вы хотите, чтобы вся форма проверялась при нажатии.

(Кроме того, я немного сократил ваш флажок, используя замечательную функцию сцепления jQuery, хотя ваше «кэширование» до textBox столь же эффективно.)

Answer 3

Параметр Depends работает неправильно, я полагаю, что документация устарела. Мне удалось заставить это работать так:

required : function(){ return $("#register").hasClass("open")}

Answer 4

После @ Коллин Аллен ответ:

Проблема в том, что если вы снимите флажок, когда сообщение об ошибке отображается, сообщение об ошибке не исчезнет.

Я решил это, удалив сообщение об ошибке при отключении поля.

Возьмите демо Collin и внесите следующие изменения в процесс включения / выключения:

jQuery('#ItemList :checkbox').click(function()
{
    var jqTxb = $(this).siblings(':text')
    if ($(this).attr('checked'))
    {       
        jqTxb.removeAttr('disabled').focus();
    }
    else
    {
        jqTxb.attr('disabled', 'disabled').val('');
        var obj = getErrorMsgObj(jqTxb, "");
        jqTxb.closest("form").validate().showErrors(obj);
    }
});
function getErrorMsgObj(jqField, msg)
{
    var obj = {};
    var nameOfField = jqField.attr("name");
    obj[nameOfField] = msg;
    return obj;
}

Вы можете видеть, как я удаляю сообщение об ошибке из поля при его отключении

И если вы беспокоитесь о $("form").validate(), не надо! Он не выполняет повторную проверку формы, он просто возвращает объект API проверки jQuery.

Answer 5

У меня была точно такая же проблема.

Я решил эту проблему с помощью вызова обработчика события смены переключателя valid () во всей форме.

работал отлично. Другие решения выше не работали для меня.

Answer 6

Не следует проверять поле после отключения / включения?

jQuery('#ItemList :checkbox').click(function(event) {
        var textBox = jQuery(this).siblings(':text');

        if (!jQuery(this).attr("checked")) {
                textBox.attr('disabled', 'disabled');
                textBox.val('');
        } else {
                textBox.removeAttr('disabled');
                textBox[0].focus();
        }
        textBox.valid();    
});

Answer 7

Я не пробовал плагин валидатора, но тот факт, что сообщение показывает на долю секунды, звучит для меня как двойное связывание, как вы называете свои связыватели? Если вы связываете функцию, попробуйте отменить привязку непосредственно перед запуском, например, так:

$('#ItemList :checkbox').unbind("click");
...Rest of code here...

Answer 8

Я не знаю, для этого ли вы работали ... но не изменились. Требуется к .wasReq (в качестве заполнителя, чтобы отличить его от того, который, возможно, не потребуется) при установке флажка сделать то же самое? Если этот флажок не установлен, поле не является обязательным - вы также можете удалить Class (число), чтобы устранить ошибку там.

Насколько мне известно, даже если поле отключено, правила, применяемые к нему, все еще применяются. Кроме того, вы всегда можете попробовать это ...

// Removes all values from disabled fields upon submit
$(form).submit(function() {
   $(input[type=text][disabled=disabled]).val();
});