使用依赖于 jQuery Validation 插件答案

【问题标题】：Using depends with the jQuery Validation plugin使用依赖于 jQuery Validation 插件
【发布时间】：2008-12-19 00:57:46
【问题描述】：

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

启用时，这些文本框中的值必须是有效数字，但禁用时不需要值（显然）。我正在使用 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 方法。

【问题讨论】：

我在评论而不是回答，因为我从未使用过验证插件。您是否尝试过将 textBox.validate() 放在检查复选框的 if 语句的真实部分中？
很遗憾没有这样做

标签： javascript jquery jquery-validate

【解决方案1】：

使用“忽略”选项 (http://docs.jquery.com/Plugins/Validation/validate#toptions) 可能是您处理此问题的最简单方法。取决于你在表格上还有什么。例如，如果您有其他控件被禁用但由于某种原因仍需要验证，您将不会过滤禁用的项目。但是，如果该路线不起作用，则使用额外的类进行过滤（使用复选框添加和删除）应该可以让您到达您想去的地方，但更容易。

即

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

【讨论】：

@drudru：您需要验证您的选择器是否正确。当然，":disabled" 指定所有禁用的选择器都应该被忽略。或者，ignore: ".ignoreMe" 将忽略所有具有 "ignoreMe" 类的元素。

【解决方案2】：

通常在执行此操作时，我会跳过 'depends' 并仅使用 required jQuery Validate 规则并让它根据给定的选择器处理检查，而不是在验证规则和复选框单击处理程序之间拆分逻辑.我使用您的标记整理了quick demo 我如何完成此操作。

真的，归结为 required:'#OneSelected:checked'。这使得仅当表达式为真时才需要相关字段。在演示中，如果您立即提交页面，它可以工作，但是当您选中复选框时，表单无法提交，直到选中的字段填充了一些输入。如果您希望整个表单在单击时进行验证，您仍然可以在复选框单击处理程序中调用 .valid()。

（另外，我缩短了您的复选框切换时间，利用了 jQuery 出色的链接功能，尽管您对 textBox 的“缓存”同样有效。）

【讨论】：

+1 用于优雅的解决方案，但存在一个问题：如果您在尝试提交后取消选中复选框 - 错误消息不会消失。通过在禁用字段时删除错误消息来解决它，将其写在单独的答案中，因为 cmets 中的格式是废话

【解决方案3】：

Depends 参数无法正常工作，我想文档已过时。我设法让它像这样工作：

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

【讨论】：

【解决方案4】：

按照@Collin Allen 的回答：

问题在于，如果您在显示错误消息时取消选中复选框，则错误消息不会消失。

我已经通过在禁用该字段时删除错误消息来解决它。

以 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()，请不要担心！它不会重新验证表单，它只是返回 jQuery 验证的 API 对象。

【讨论】：

【解决方案5】：

我不知道这是否是您想要的...但不会在选中该框时将 .required 更改为 .wasReq （作为一个占位符，以将其与可能不需要的占位符区分开来）做同样的事情？如果未选中，则该字段不是必需的 - 您也可以 removeClass(number) 来消除那里的错误。

据我所知，即使某个字段被禁用，应用到它的规则仍然有效。或者，您可以随时尝试这个...

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

【讨论】：

【解决方案6】：

我还没有尝试过验证器插件，但是消息显示一瞬间的事实对我来说听起来像是双重绑定，你怎么称呼你的活页夹？如果您在函数中绑定，请在开始之前尝试取消绑定，如下所示：

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

【讨论】：

【解决方案7】：

禁用/启用后不应该验证字段吗？

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();    
});

【讨论】：

【解决方案8】：

我也遇到了同样的问题。

我通过让单选按钮更改事件处理程序在整个表单上调用 valid() 解决了这个问题。

工作完美。上面的其他解决方案对我不起作用。

【讨论】：