jQuery驗證 - 基於其他字段更改「必需」屬性

Question

我在我正在構建的表單上使用jQuery驗證插件（http://docs.jquery.com/Plugins/Validation）。該表格由6個字段組成，每個字段包含3個用於電子郵件地址，名字和姓氏的文本輸入。標記的簡化版本如下：

<form id="ref" action="submit.php" method="post"> 
    <fieldset id="ref_1"> 
     <input id="ref_1_email" type="text" /> 
     <input id="ref_1_fname" type="text" /> 
     <input id="ref_1_lname" type="text" /> 
    </fieldset> 
    <fieldset id="ref_2"> 
     <input id="ref_2_email" type="text" /> 
     <input id="ref_2_fname" type="text" /> 
     <input id="ref_2_lname" type="text" /> 
    </fieldset> 
    <fieldset id="ref_3"> 
     <input id="ref_3_email" type="text" /> 
     <input id="ref_3_fname" type="text" /> 
     <input id="ref_3_lname" type="text" /> 
    </fieldset> 
</form> 

等等，直到ref_6。但是，用戶不一定需要完成每個字段 - 他們可能只會選擇填寫fieldset＃ref_1和fieldset＃ref_2內的輸入，並將其他字段留空。但是，例如，如果他們輸入了ref_1的電子郵件，則還需要ref_1的名字和姓氏。所以我需要做的是檢查一個字段集中的所有3個輸入。如果它們全部是空白的，則可以忽略它們，但是如果其中一個輸入被填充，則兩個鄰居也必須完成。到目前爲止，我所有的嘗試都非常麻煩（注意每個人的改變，然後評估是否空着......），任何幫助都會很大，非常感謝。

感謝

更新：

我發現一個帖子有類似的問題，有建議的解決方案之中：

$('#emailToName2').keyup(function() { 
    $('#emailToAddress2').toggleClass('required', $(this).val()); 
}); 

但這需要重複對每個輸入上述邏輯，這對我來說似乎有點矯枉過正。什麼會是一個更動態的方法？

乾杯！

Answer 1

指示需要字段時，可以指定expression或callback。驗證插件將在驗證字段之前評估表達式或回調。

下面是一個例子：

$("#ref").validate({ 
    rules: { 
    ref_1_email: { 
     required: function(element) { 
     return $("#ref_1_fname").val() || $("ref_1_lname").val(); 
     } 
    } 
    } 
}); 
$("#ref_1_email").blur(function() { 
    $("#ref_1_fname").valid(); 
    $("#ref_1_lname").valid(); 
}); 

很可能有一些重構，你可以做，這樣你就不必再重複所有這一切都爲每個字段...

Answer 2

沒試過也不正確書面形式：

$("#ref input").keyup(function() { 
$(this).parents("fieldset").children("input").toggleClass("required", $(this).val()); 
}); 

Answer 3

您可以編寫自己的自定義驗證類，用於評估2個輸入的其中一個是否已完成。

例如。

jQuery.validator.addMethod('MyOwnValidator', function(value, element) { 
    var required = false; 
    $(element).parent().children('input').each(function() { 
     if($(this).val() && $(this).attr('id') != $(element).attr('id')){ 
      required = true; 
     } 
    }); 
    return !required; 
}); 

這將評估是否有任何兄弟輸入有一個值，如果他們這樣做，使呼叫輸入需要。

Answer 4

你不能在一個循環內完成所有操作，因爲你需要在切換類之前檢查兄弟姐妹。但是，您可以定義一個可檢查和應用的小型循環函數，但您需要多次調用它才能保持邏輯。

試試這個：

var loop = function(target, fn) { 
    var t = 0, fn = fn || function(){}; 
    $(target).siblings().andSelf().each(function(i, el) { 
     t += $(el).val().length; 
     fn(el); 
    }); 
    return t; 
} 
$('fieldset input').each(function() { 
    $(this).bind('blur', function(e) { 
     if(loop(e.target)) { 
      loop(e.target, function(el) { 
       $(el).toggleClass('required', !$(el).val().length); 
      }) 
     } else { 
      loop(e.target, function(el) { 
       $(el).removeClass('required'); 
      }) 
     } 
    }); 
}); 

Answer 5

只是調查這一個項目。根據文檔，以下應該做你想要的。

當第一次調用表單上validate，像這樣做：

$("#emailRecsForm").validate({ 
    rules: { 
     ref_1_email: { 
     required: ("#ref_1_fname:filled" || "#ref_1_lname:filled"), 
     email: true 
     }, 
     ref_1_fname: { 
     required: ("#ref_1_email:filled" || "#ref_1_lname:filled") 
     }, 
     ref_1_lname: { 
     required: ("#ref_1_email:filled" || "#ref_1_fname:filled") 
     }, 

     ref_2_email: { 
     required: ("#ref_2_fname:filled" || "#ref_2_lname:filled"), 
     email: true 
     }, 
     // And so on... 
    } 
}); 

此外，確保每個input S的有一個name屬性等同於它id。

我自己實際上沒有嘗試過，但通過the docs（請參閱required(dependency-expression)）來判斷，它應該有效。