jQuery验证器-无法调用未定义错误的方法'call'-动态添加验证时

dxpyg8gm  于 2023-11-17  发布在  jQuery
关注(0)|答案(6)|浏览(163)

这是我的代码,用于动态更新jQuery验证。在文档加载中,我创建了验证。此代码用于动态更新电话号码验证。在应用此验证后,当我在电话号码文本框中输入任何内容时,我将收到无法调用未定义错误的方法“call”。

  1. $("#phone").rules("remove");
  2. $("#phone")
  3. .rules(
  4. "add",
  5. {
  6. required:true,
  7. minlength:5,
  8. maxlength:20,
  9. phoneUS:true,
  10. messages:{
  11. required: "Enter company phone number",
  12. minlength:"Phone number should contain a minimum of 5 characters",
  13. maxlength:"Phone number should contain a maximum of 20 characters",
  14. phoneUS:"Enter valid phone number"
  15. }
  16. });

字符串
这怎么解决?!

j9per5c4

j9per5c41#

有四个潜在的问题。
1)messages部分缺少一个右括号。

  1. $("#phone").rules("add", {
  2. required: true,
  3. phoneUS: true,
  4. messages: {
  5. required: "Enter company phone number",
  6. phoneUS: "Enter valid phone number"
  7. } //<-- this was missing
  8. });

字符串

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规则,因此minlengthmaxlength完全是多余的,因为phoneUS规则已经在寻找精确的格式/长度。

展开查看全部
umuewwlo

umuewwlo2#

我遇到了同样的问题,但原因不同。当我把规则“require:true”而不是“required:true”时,同样的问题也会发生。
当您在规则中指定了一个没有对应方法的验证时,就会发生此错误。通过调试,我发现异常正在显示我通过方法名称指定了一个规则“require”。它试图访问hashmap中的方法,并尝试.call(),即使找不到该方法,这也会导致异常。
如果插件作者在这种情况下简单地抛出一个自定义错误,声明“规则'require'没有方法”,那么调试和识别错别字就更容易了。
这也是同样的原因臭名昭著的问题与插件提交,即使字段是无效的。见&投票给我的问题报告-https://github.com/jzaefferer/jquery-validation/issues/1212

zy1mlcev

zy1mlcev3#

作为一个相关的错误,如果你添加一个自定义规则,使用:

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

字符串
但是在你的规则声明中用错误的名字引用它:

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


你会得到相同的Cannot call method call of undefined

bmvo0sr5

bmvo0sr54#

运行此示例代码时发生错误:

  1. $(document).ready(function () {
  2. $.validator.addMethod("numberEqualTo", function (value, element, parameter) {
  3. return parseInt(value) === parseInt(parameter);
  4. }, "Values must match");
  5. $("#example2").validate({
  6. focusInvalid: false,
  7. onkeyup: true,
  8. onfocusout: true,
  9. errorElement: "div",
  10. errorPlacement: function (error, element) {
  11. error.appendTo("div#errors");
  12. },
  13. rules: {
  14. "example2-fullname": {
  15. required: true,
  16. minlength: 5
  17. },
  18. "example2-phone": {
  19. required: true,
  20. number: true
  21. },
  22. "example2-zip": {
  23. required: true,
  24. number: true,
  25. rangelength: [3, 5]
  26. },
  27. "example2-value": {
  28. required: true,
  29. number: true,
  30. numberEqualTo: 10
  31. }
  32. },
  33. messages: {
  34. "example2-fullname": {
  35. required: "You must enter your full name",
  36. minlength: "First name must be at least 5 characters long"
  37. },
  38. "example2-phone": {
  39. required: "You must enter your phone number",
  40. number: "Phone number must contain digits only"
  41. },
  42. "example2-zip": {
  43. required: "You must enter your zip code",
  44. number: "Zip code must contain digits only",
  45. rangelength: "Zip code must have between 3 to 5 digits"
  46. },
  47. "example2-value": {
  48. required: "You must enter your value",
  49. number: "Value must be a digit",
  50. numberEqualTo: "Value must be equal to 10"
  51. }
  52. }
  53. });
  54. });

字符串
为什么?由于某些原因,如果你明确指定:

  1. onkeyup: true,
  2. onfocusout: true,


程序将抛出上述异常。这是当你设置任何或以上两个选项为'true'的情况。另一方面,如果你设置两个为'false'或一个为'false'并删除另一个,它将按预期工作。
最重要的是:如果您删除或注解掉这些选项中的任何一个,您删除的选项将被设置为默认值,即'true'并且不会抛出任何错误。因此,可以按照您想要的方式自定义验证插件,您只需要记住不要显式地将这些选项设置为'true'。

展开查看全部
l2osamch

l2osamch5#

上面的代码将无法工作,因为它在属性列表后缺少}

相关问题