基於無線電價值形式的條件jquery驗證

Question

我正在使用驗證插件。 我想驗證相同的形式，某些字段時，無線電值比「正規」等，

<form id="registerform"> 
<input type="radio" name="role" value="REGULAR" checked="checked" id="role">Regular<br /> 
<input type="radio" name="role" value="AGENT" id="role">Agent<br /> 
<input type="radio" name="role" value="ORGANIZATION" id="role">Organization<br /> 

<input type="text" name="phone" id="phone"><br/> 
<input type="text" name="password" id="password"><br/> 

<input type="text" name="work_area" id="work_area" value=""><br/> 
<input type="text" name="work_phone" id="work_phone" value=""><br/> 

<input type="text" name="org_name" id="org_name"><br/> 
<input type="text" name="org_phone" id="org_phone"><br/> 
</form> 

當角色==「正規軍」，驗證電話，密碼
當角色==「代理」 ，驗證電話，密碼，work_area，work_phone
當角色== 「組織」，驗證電話，密碼，ORG_NAME，org_phone
如何優雅地實現這一目標？
我不想把它分成不同的形式！

我的錯誤代碼：

$(document).ready(function() { 
var rule_options = 
{ 
    "phone": "required" 
    ,"password": "required" 
}; 

var role = $("#registerform").find("input[name=role]:checked").val(); 
if(role == "AGENT") { 
    $.extend(true, rule_options, 
     { 
      "work_area": "required" 
      ,"work_phone": "required" 
     } 
    ); 
} 

if(role == "ORGANIZATION") { 
    $.extend(true, rule_options, 
     { 
      "org_area": "required" 
      ,"org_phone": "required" 
     } 
    ); 
} 
jform.validate({ 
      errorClass : "err_label", 
      rules: rule_options, 
      ignore: "", 

上面的代碼不會的document.ready後，因爲它的運行工作，只有一次。
我必須缺少一些東西，一些語法..〜想法？

Answer 1

jquery validation rules
我得到了我真正的從上面的鏈接需要。這裏需要解決的是如何使jQuery驗證器插件的行爲DYNAMICALLY基於每個輸入的無線電值。我甚至不使用jQuery.change（）方法。

function getRole() { 
    return $("#registerform").find("input[name=role]:checked").val(); 
} 

$(document).ready(function() { 
    var jform = $("#registerform"); 
    jform.validate({ 
      errorClass : "err_label", 
      rules: 
       "phone": "required" 
       ,"password": "required" 
       ,"work_area": { 
        required: function(element) { 
         return (getRole() == 'AGENT'); 
        } 
       } 
       ,"work_phone": { 
        required: function(element) { 
         return (getRole() == 'AGENT'); 
        } 
       } 
       ,"org_name": { 
        required: function(element) { 
         return (getRole() == 'ORGANIZATION'); 
        } 
       } 
       ,"org_phone": { 
        required: function(element) { 
         return (getRole() == 'ORGANIZATION'); 
        } 
       } 

如果存在其他的想法，請讓我知道。

Answer 2

$("input[@name='role']").change(function(){ 
    // Rest of your code here. 
}); 

使用onload事件時，將函數綁定到單選按鈕。

Answer 3

每次用戶單擊表單或按下某個鍵時，都可以更新驗證規則。

function updateRules() { 
    // Your code here 
} 

$('#registerform').click(function() { 
    updateRules(); 
}); 

$('#registerform').keyUp(function() { 
    updateRules(); 
}); 

Answer 4

的問題是，你正在做的：

var role = $("#registerform").find("input[name=role]:checked").val(); 

和工作，但只有一次，因爲你需要這附加到事件（可能的變化情況適用），所以每次單選按鈕以某種方式改變，驗證設置應該改變：

$("input[@name='role']").change(function(){ 
    if($(this).is(":checked")){ // check if the radio is checked 
     var val = $(this).val(); // retrieve the value 
     if(role == "AGENT") { 
      $.extend(true, rule_options, { 
       "work_area": "required" 
      ,"work_phone": "required"}); 
     } 
     if(role == "ORGANIZATION") { 
      $.extend(true, rule_options, { 
       "org_area": "required" 
      ,"org_phone": "required"}); 
     } 
    } 
}); 

Answer 5

使用忽略選項。對不起，如果有任何語法錯誤，我無法訪問我的開發工具，並且jsfiddle不能從我的電腦上運行。

編輯：我假設所有的字段都是必需的。

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

var role = { 
    "REGULAR": ["work_area", "work_phone", "org_name", "org_phone"], 
    "AGENT": ["org_name", "org_phone"], 
    "ORGANIZATION": ["org_name", "org_phone"] 
}; 

$("input[name=role]").click(function() { 
    //reset ignore 
    $("#work_area,#work_phone,#org_name,#org_phone").removeClass("ignore"); 

    for (var i in role[$(this).val()]) 
    { 
     $(i).addClass("ignore"); 
    } 
});