使用取决于jQuery验证插件

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）可能会为你处理最简单的方法。取决于你在表格上还有什么。因为如果您禁用了其他控件但因为某些原因您仍需要验证，您不会过滤禁用的项目。但是，如果这条路线不起作用，那么使用额外的类来过滤（使用您的复选框添加和删除）应该让您到达想要去的地方，但更容易。

I.e.

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

Answer 2

我不知道这是你要做什么......但不会改变.required to .wasReq（作为一个占位符区分这可能不会被要求），在检查盒子做同样的事情？如果没有选中，该字段不是必需的 - 您也可以删除类别（数字）以消除那里的错误。

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

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

Answer 3

我还没有尝试过的验证插件，但该消息显示了splitsecond事实听起来好像双重困境，你怎么打电话给你的粘合剂？如果你在函数中绑定，试着在开始之前解除绑定，如下所示：

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

Answer 4

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

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 5

通常这样做时，我跳过“赖”，只是使用required jQuery验证规则，让它处理基于给定的选择的检查，而不是分裂的验证规则和复选框之间的逻辑点击处理器。我把我的一个quick demo放在一起，我使用你的标记来完成这个任务。

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

（另外，我缩短了您的复选框切换了一下，利用jQuery的美妙的链接功能的，虽然你的“缓存”，以textBox一样有效。）

Answer 6

取决于参数不能正常工作，我想文档已过时。 我设法得到这样的工作是这样的：

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

Answer 7

我有完全相同的问题。

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

工作完美。上述其他解决方案不适合我。

Answer 8

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