使用帶有類名的參數添加JQuery驗證插件自定義方法

Question

我想做的事：
我需要使用帶有內聯類名稱的JQuery驗證插件（jqueryvalidation-bassistance）來驗證是否選中了一個復選框，下拉列表應該為空。

我在做什么：
我正在嘗試使用JQuery驗證插件（jqueryvalidation-bassistance）並使用param在復選框的類名稱中使用'shouldBeEmptyIf'添加自定義驗證規則

/*JS function to return status of checkbox*/
function getValue(){
    return  $('[name=checkBox1]').prop('checked');
}


/*Form element using class for validation - JQuery validation plugin*/
<input type="checkbox" name="checkBox1" class="{shouldBeEmptyIf: [getValue() , $('[name=dropDownElement]').val())=='']}">

<select name="dropDownElement" size="1" > 
          <option value="1">One</option> 
          <option value="2">Two</option> 
</select>


/*custom method added in additional-methods.js of the JQuery validation plugin*/
jQuery.validator.addMethod("shouldBeEmptyIf", function(value, element, param) {
    console.log("param[0]: " + param[0] + "  param[1]: " + param[1]);
    return ( param[0] && param[1] );
}, "This field must be empty");

我遇到的問題：
我確實獲得了param [0]和param [1]的值，但是即使我更改了下拉菜單或select / unselect復選框，它們也被“緩存”，它們保持不變（也試圖添加getValue（）函數以獲取每次都有新的價值，但沒有奏效）。

加載頁面時，它將獲得初始值。 頁面加載時是否分配靜態值？ 如果是這樣，如何使用內聯類的JQuery驗證插件來實現我想做的事情的解決方案

任何幫助和朝着它的方向將不勝感激

謝謝

Answer 1

在嘗試找到幾種不同的方法后，我最終使用了這種方法，如果其他人嘗試做類似的事情，思想可能會有所幫助。

我沒有傳遞元素的值，而是傳遞了元素的名稱（或者，如果需要的話，傳遞了元素的id），並且在附加方法本身中，使用傳遞的名稱/ id獲得了那些元素的當前值，並且該方法有效。 。

下面是更新的代碼：

/*Updated html Form element*/
<input type="checkbox" name="checkBox1" class="{shouldBeEmptyIf: [checkBox1 , dropDownElement]}">

<select name="dropDownElement" size="1" > 
          <option value="1">One</option> 
          <option value="2">Two</option> 
</select>


/*Updated additional method*/
jQuery.validator.addMethod("shouldBeEmptyIf", function(value, element, param) {
    var valid =true;
    if($('[name='+ param[0] +']').prop('checked') && $('[name='+ param[1] +']').val()!=''){
        valid = false;
    }
    return valid; 
}, "This field must be empty");

希望這會有所幫助。

Answer 2

驗證程序在表單上的效果最佳。 將輸入內容包裝成表格。

  <form>
   <input type="checkbox" name="checkBox1">
  </form>

您必須定義一個驗證處理程序：

$('#myform').validate({
    rules : {
        dropDownElement: { shouldBeEmptyIf : true }
    }
});

然后，它將運行驗證器預提交。 我敢肯定，還有其他方法可以將自定義驗證器綁定到各個元素，這只是一種清晰的方法。 盡管可以嘗試，但我認為您不需要以這種方式定義類。