使用取决于jQuery Validation插件 [英] Using depends with the jQuery Validation plugin

问题描述

我有一个带有一堆默认禁用的文本框的表单，然后使用每个文本框旁边的复选框启用。

I've got a form with a bunch of textboxes that are disabled by default, then enabled by use of a checkbox next to each one.

启用后，这些文本框中的值必须是有效数字，但在禁用时，它们不需要值（显然）。我正在使用jQuery Validation插件来执行此验证，但它似乎没有按照我的预期进行。

When enabled, the values in these textboxes are required to be a valid number, but when disabled they don't need a value (obviously). I'm using the jQuery Validation plugin to do this validation, but it doesn't seem to be doing what I expect.

当我单击复选框并禁用文本框时，尽管我已经添加到规则中的 depends 子句，但仍然会收到无效字段错误（请参阅下面的代码）。奇怪的是，实际发生的是错误消息显示一瞬间然后消失。

When I click the checkbox and disable the textbox, I still get the invalid field error despite the depends clause I've added to the rules (see code below). Oddly, what actually happens is that the error message shows for a split second then goes away.

以下是复选框列表的示例&文本框：

Here is a sample of the list of checkboxes & textboxes:

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

And here is the jQuery code I'm using

//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 方法。

Ignore the hidden field in each li it's there because I'm using asp.net MVC's Html.Checkbox method.

推荐答案

使用忽略选项（ http://docs.jquery.com/Plugins /验证/验证#toptions ）可能是您处理此问题的最简单方法。取决于您在表单上还有什么。例如，如果您有其他已禁用的控件但仍需要根据某些原因进行验证，则不会对禁用的项目进行过滤。但是，如果该路由不起作用，则使用其他类进行过滤（使用复选框添加和删除）可以使您到达目的地，但更容易。

Using the "ignore" option (http://docs.jquery.com/Plugins/Validation/validate#toptions) might be the easiest way for you to deal with this. Depends on what else you have on the form. For i.e. you wouldn't filter on disabled items if you had other controls that were disabled but you still needed to validate for some reason. However, if that route doesn't work, using an additional class to filter on (adding and removing with your checkboxes) should get you to where you want to go, but easier.

即

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

这篇关于使用取决于jQuery Validation插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！