使用取決於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對象。