xác thực jquery có điều kiện dựa trên giá trị radio theo mẫu

Question

Tôi đang sử dụng plugin xác thực. Tôi muốn xác nhận một số lĩnh vực theo hình thức CÙNG, khi giá trị phát thanh là khác hơn là "thường xuyên",

<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> 

Khi vai trò == "thường xuyên", xác nhận điện thoại, mật khẩu
Khi vai trò == "AGENT" , xác nhận điện thoại, mật khẩu, work_area, work_phone
Khi vai trò == "TỔ CHỨC", xác nhận điện thoại, mật khẩu, ORG_NAME, org_phone
Làm thế nào để đạt được điều này tao nhã?
Tôi không muốn chia thành các hình thức khác nhau!

đang sai của tôi:

$(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: "", 

Trên mã sẽ không hoạt động kể từ khi chạy nó chỉ một lần sau khi document.ready.
Tôi phải thiếu cái gì đó, một số cú pháp .. ~ Ý tưởng?

Answer 1

jquery validation rules
tôi nhận được những gì tôi thực sự cần thiết từ trên liên kết. Những gì cần phải được giải quyết ở đây thực sự là làm thế nào để làm cho plugin validator jQuery hành xử NĂNG ĐỘNG Dựa trên giá trị radio cho mỗi đầu vào. Tôi thậm chí không sử dụng phương thức 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'); 
        } 
       } 

Nếu có ý tưởng khác, vui lòng cho tôi biết.

Answer 2

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

Giả sử sử dụng sự kiện onload, liên kết chức năng với nút vô tuyến.

Answer 3

Bạn có thể cập nhật quy tắc xác thực, mỗi khi người dùng nhấp vào biểu mẫu hoặc nhấn một phím trên đó.

function updateRules() { 
    // Your code here 
} 

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

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

Answer 4

Vấn đề là bạn đang làm:

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

và làm việc của mình, nhưng chỉ một lần kể từ khi bạn cần phải đính kèm này để một sự kiện (có lẽ sự kiện thay đổi phù hợp), do đó mỗi lần radiobuttons bằng cách nào đó thay đổi, cài đặt xác thực sẽ thay đổi:

$("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

Sử dụng tùy chọn bỏ qua. Xin lỗi nếu có bất kỳ lỗi cú pháp nào vì tôi không có quyền truy cập vào các công cụ phát triển của mình và jsfiddle không hoạt động từ máy tính của tôi.

EDIT: Tôi giả sử tất cả các trường là bắt buộc.

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