jQuery驗證程序 - 無法調用未定義錯誤的方法'調用' - 同時動態添加驗證

Question

這是我的代碼動態更新jQuery驗證。在文檔加載中，我創建了驗證。此代碼用於動態更新電話號碼驗證。應用此驗證後，當我在電話號碼文本框中輸入任何內容時，我無法調用未定義錯誤的方法「調用」。

$("#phone").rules("remove"); 

$("#phone") 
    .rules(
    "add", 
    { 
    required:true, 
    minlength:5, 
    maxlength:20, 
    phoneUS:true, 
    messages:{ 
    required: "Enter company phone number", 
    minlength:"Phone number should contain a minimum of 5 characters", 
    maxlength:"Phone number should contain a maximum of 20 characters", 
    phoneUS:"Enter valid phone number" 
    } 

    }); 

在此先感謝。如何解決這個問題？

Answer 1

有四個潛在的問題。

1）您錯過了messages部分的右大括號。

$("#phone").rules("add", { 
    required: true, 
    phoneUS: true, 
    messages: { 
     required: "Enter company phone number", 
     phoneUS: "Enter valid phone number" 
    } //<-- this was missing 
}); 

DEMO：http://jsfiddle.net/A8HQU/2

2）有a known bug其中使用rules('add')方法加入messages打破了插件和/或規則。確保你包含jQuery驗證版本1.11.1或更好。

3）phoneUS規則要求包含the additional-methods.js file。

4）rules('add')方法必須來後.validate()初始化函數。

注意：

您使用的是phoneUS規則，所以minlength和maxlength是完全多餘的，因爲在phoneUS規則已經在尋找一個精確的格式/長度。

Answer 2

上面的代碼將無法正常工作，因爲在屬性列表後缺少}。

Answer 3

我有同樣的問題，但有不同的原因。當我把規則「re​​quire：true」而不是「required：true」時，會發生同樣的問題。

當您在規則中指定沒有相應方法的驗證時，會發生此錯誤。通過調試，我發現異常顯示我指定了一個規則「re​​quire」，方法名稱爲「required」。它試圖訪問hashmap中的一個方法，並嘗試.call（），即使該方法未找到，這也會導致異常。

如果插件作者只是拋出一個自定義錯誤，在這種情況下，聲明「規則」要求'沒有方法「，這將更容易調試&識別錯字。

即使字段無效，這也是插件提交臭名昭着的問題的原因。見&投票給我的問題的報告 - https://github.com/jzaefferer/jquery-validation/issues/1212

Answer 4

您還需要添加這種額外的方法

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/additional-methods.js

Answer 5

作爲一個相關的bug，如果添加了自定義規則，使用：

$.validator.addMethod('field-is-valid', function (val, element) { ...}) 

但在規則聲明中使用錯誤的名稱引用它：

$(element).rules('add', { 
    "field-valid": true 
}) 

你會得到相同的Cannot call method call of undefined。

Answer 6

我最近碰到過兩次類似的問題，並花了很多時間試圖弄清楚，所以我將在這裏留下一個簡單的解決方案。如果主持人認爲這不是正確的地方，請讓我知道。

$(document).ready(function() { 

    $.validator.addMethod("numberEqualTo", function (value, element, parameter) { 
     return parseInt(value) === parseInt(parameter); 
    }, "Values must match"); 

    $("#example2").validate({ 
     focusInvalid: false, 
     onkeyup: true, 
     onfocusout: true, 
     errorElement: "div", 
     errorPlacement: function (error, element) { 
      error.appendTo("div#errors"); 
     }, 
     rules: { 
      "example2-fullname": { 
       required: true, 
       minlength: 5 
      }, 
      "example2-phone": { 
       required: true, 
       number: true 
      }, 
      "example2-zip": { 
       required: true, 
       number: true, 
       rangelength: [3, 5] 
      }, 
      "example2-value": { 
       required: true, 
       number: true, 
       numberEqualTo: 10 
      } 
     }, 
     messages: { 
      "example2-fullname": { 
       required: "You must enter your full name", 
       minlength: "First name must be at least 5 characters long" 
      }, 
      "example2-phone": { 
       required: "You must enter your phone number", 
       number: "Phone number must contain digits only" 
      }, 
      "example2-zip": { 
       required: "You must enter your zip code", 
       number: "Zip code must contain digits only", 
       rangelength: "Zip code must have between 3 to 5 digits" 
      }, 
      "example2-value": { 
       required: "You must enter your value", 
       number: "Value must be a digit", 
       numberEqualTo: "Value must be equal to 10" 
      } 
     } 
    }); 
}); 

爲什麼：

的錯誤，而在運行此示例代碼，會發生什麼？出於某種原因，如果您明確指定：

onkeyup: true, 
onfocusout: true, 

程序會拋出上述異常。當您將上面的ANY或BOTH選項設置爲'true'時，就是這種情況。另一方面，如果您將BOTH設置爲「false」或將ONE設置爲「false」並移除另一個，則它將按預期工作。

最重要的是：如果您刪除或註釋掉了這些選項中的任何一個，那麼您刪除的選項將被設置爲默認值，這是'true'並且W'T會引發任何錯誤，因此可以自定義驗證你只需要記住不要明確地將這些選項設置爲'true'

我希望這會幫助某人，儘管這個問題對於這個特定用戶的實際問題已經