使用Jquery進行條件驗證有時不起作用

Question

我已經實現了Jquery Validator，但面臨着某些有時無法正常工作的條件驗證的問題。

1. 我有要求控制應該是需要的，如果單選按鈕被選中，我已經創建函數被調用，我傳遞單選按鈕的名稱。
2. 我也面臨着其他驗證這個問題僅如果任何兩個單選按鈕中選擇出的3

當我添加警報每次功能警報被調用，但驗證需要控制不
我已經被截斷我的驗證碼讓我知道，如果我做錯了什麼

JS代碼： -

$('#ConditionalLiability').validate({ 
    onfocusout: false, 
    onkeyup: false, 
    rules: { 
     ConcernsNoted: { 
      required: true 
     }, 
     ConcernsWithExteriorWalls: { 
      required: ValidationRadio("ConcernsNoted", 'Y') 
     }, 
     chkExteriorWalls: { 
      required: ValidationRadio("ConcernsWithExteriorWalls", 'Y') 
     }, 
     GranularLossComments: { 
      required: Conditional("GranularLoss") 
     } 
    }, 
    showErrors: function (errorMap, errorList) { 
     var messages = ""; 
     var check = 0; 
     $.each(errorList, function (index, value) { 
      check = 1; 
      var id = $(value.element).attr('id'); 
      messages += (index + 1) + ". " + value.message + "\n"; 
     }); 
     messages = "Please correct following errors \n" + messages; 
     if (check == 1) { 
      alert(messages); 
     } 
    }, 
    submitHandler: function() { 
     SaveData(); 
    }, 
    messages: { 
     ConcernsNoted: { 
      required: "Please select a value for Concerns With Home Exterior" 
     }, 
     ConcernsWithExteriorWalls: { 
      required: "Please select a value for Concerns With Exterior Walls" 
     },   
     chkExteriorWalls: { 
      required: "Please select at least one option for Concerns with Exterior Walls" 
     }, 
     GranularLossComments: { required: "Please enter comments for GranularLoss" 
     } 

    } 
}); 


function Conditional(id) { 
    var element = "input:radio[name='" + id + "']:checked"; 
    var radio_value = $(element).val(); 
    if ((radio_value == 'M') || (radio_value == 'S')) { 
     return true; 
    } else { 
     return false; 
    } 
} 

function ValidationRadio(id, check) { 
    var element = "input:radio[name='" + id + "']:checked"; 
    var radio_value = $(element).val(); 
    if (radio_value == check) { 
     alert('true'); 
     return true; 
    } else { 
     return false; 
    } 
} 

Answer 1

.validate()是插件的初始化方法，但是，as per your jsFiddle，你會自動調用它，彷彿它是用於測試形式有效性的方法...

$(document).ready(function() { 
     $('#submit').click(function() { 
     submitForm(); 
    }); 
}); 

function submitForm() { 
    $('#ConditionalLiability').validate({ 
     // options & rules 
    }); 
} 

function Conditional(id) { 
    // your code 
} 

function ValidationRadio(id, check) { 
    // your code 
} 

初始化完成後，該插件捕捉提交按鈕的單擊事件。

• 擺脫您的click處理程序。你不需要它，在很多情況下，它會干擾插件的默認行爲。

另外：

• 由於您使用jQuery Mobile的使用.on('pageinit', function()代替.ready(function()

• 擺脫你破碎的外部條件的功能和利用depends子選項，而不是（見下文）。

重因子代碼到這個...

$(document).on('pageinit', function() { 

    $('#ConditionalLiability').validate({ 
     onfocusout: false, 
     onkeyup: false, 
     rules: { 
      ConcernsNoted: { 
       required: true 
      }, 
      ConcernsWithExteriorWalls: { 
       required: { 
        depends: function (element) { 
         return $("[name='ConcernsNoted'][value='Y']").is(":checked"); 
        } 
       } 
      }, 
      chkExteriorWalls: { 
       required: { 
        depends: function (element) { 
         return $("[name='ConcernsWithExteriorWalls'][value='Y']").is(":checked"); 
        } 
       } 
      }, 
      GranularLossComments: { 
       required: { 
        depends: function (element) { 
       return ($("[name='GranularLoss'][value='M']").is(":checked") || $("[name='GranularLoss'][value='S']").is(":checked")); 
        } 
       } 
      } 
     }, 
     showErrors: function (errorMap, errorList) { 
      var messages = ""; 
      var check = 0; 
      $.each(errorList, function (index, value) { 
       check = 1; 
       var id = $(value.element).attr('id'); 
       messages += (index + 1) + ". " + value.message + "\n"; 
      }); 
      messages = "Please correct following errors \n" + messages; 
      if (check == 1) { 
       alert(messages); 
      } 
     }, 
     submitHandler: function() { 
      SaveData(); 
     }, 
     messages: { 
      ConcernsNoted: { 
       required: "Please select a value for Concerns With Home Exterior" 
      }, 
      ConcernsWithExteriorWalls: { 
       required: "Please select a value for Concerns With Exterior Walls" 
      }, 
      chkExteriorWalls: { 
       required: "Please select at least one option for Concerns with Exterior Walls" 
      }, 
      GranularLossComments: { 
       required: "Please enter comments for GranularLoss" 
      } 
     } 
    }); 

}); 

DEMO：http://jsfiddle.net/6GHKN/