7

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

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

4

8 回答 8

11

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

IE

        $('form').validate({
            ignore: ":disabled",
            ...
        });
于 2009-05-19T18:59:31.597 回答
4

通常在执行此操作时，我会跳过“依赖”并仅使用requiredjQuery Validate 规则并让它根据给定的选择器处理检查，而不是在验证规则和复选框单击处理程序之间拆分逻辑。我使用您的标记整理了一个快速演示，说明我是如何完成此任务的。

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

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

于 2009-05-26T01:29:04.383 回答
2

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

required : function(){ return $("#register").hasClass("open")}
于 2010-01-31T20:46:05.740 回答
1

遵循@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 对象。

于 2010-07-14T09:26:44.723 回答
0

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

据我所知，即使某个字段被禁用，应用到它的规则仍然可以应用。或者，你总是可以试试这个......

// Removes all values from disabled fields upon submit
$(form).submit(function() {
   $(input[type=text][disabled=disabled]).val();
});
于 2009-03-16T19:45:22.500 回答
0

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

$('#ItemList :checkbox').unbind("click");
...Rest of code here...
于 2009-03-22T02:35:47.933 回答
0

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

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();    
});
于 2009-04-26T01:16:40.627 回答
0

我有同样的问题。

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

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

于 2010-04-11T05:25:29.133 回答