Question

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

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

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

以下是复选框列表的示例＆amp;文本框：

<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

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

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

（另外，我缩短了你的复选框切换，利用jQuery的精彩链接功能，虽然你对textBox的“缓存”同样有效。）

Answer 3

取决于参数无法正常工作，我认为文档已过期。我设法得到这样的工作：

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

Answer 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对象的表单。

Answer 5

我不知道这是不是你想要的......但是不会改变。需要更改.wasReq（作为占位符来区分这个与可能不需要的那个）检查框做同样的事？如果没有选中，则不需要该字段 - 您也可以删除类（数字）以消除那里的错误。

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

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

Answer 6

我没有尝试过验证器插件，但是消息显示为splitsecond的事实听起来像双重绑定，你如何调用你的绑定器？如果你绑定一个函数，请在开始之前尝试取消绑定，如下所示：

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

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

Answer 8

我遇到了同样的问题。

我通过在整个表单上使用单选按钮更改事件处理程序调用valid（）来解决这个问题。

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

使用取决于jQuery Validation插件

8 个答案: