jQuery验证插件未按预期工作。

huangapple
go评论101阅读模式
英文:

jQuery validation plugin not working as it should

问题

我正在使用jQuery验证插件进行表单验证，但它不起作用。

当我尝试验证表单时，它只是重新加载页面，什么也不发生。我唯一获得结果的时候是当我的一个输入标签中有"required"时，但我已经有了规则和消息，它们应该正常工作。

我尝试了所有但找不到错误发生在哪里。

另外，我有两个表单，但我只显示第一个表单的代码，因为它们基本相同。我已经检查过我的链接标签，但它们似乎没有错误。

  1. $().ready(function() {
  2.   $("#formFisica").validate({
  3.     onkeyup: false,
  4.     onfocusout: false,
  5.     rules: {
  6.       // 省略其他规则...
  7.     },
  8.     messages: {
  9.       // 省略其他消息...
  10.     }
  11.   });
  12. });
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  2. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
  3. <div class="container text-center">
  4.   <!-- 省略其他内容... -->
  5. </div>
  7. <div class="container pt-2" id="containerFisica">
  8.   <form id="formFisica">
  9.     <!-- 省略其他表单元素... -->
  10.     <input type="submit" value="Validate!" />
  11.   </form>
  12. </div>
  14. <div class="container pt-2" id="containerJuridica">
  15.   <form id="formJuridica">
  16.     <!-- 省略其他表单元素... -->
  17.     <input type="submit" value="Validar" />
  18.   </form>
  19. </div>
  21. <script src="./validation.js" type="text/javascript"></script>
  22. <script src="./script.js" type="text/javascript"></script>
英文:

I'm working on a form validation with the jQuery validation plug-in and it's not working properly.

When I try to validate the form it just reloads the page and nothing happens. The only time i get a result is when i have the "required" in one of my input tags, but as I already have the rules and messages, they should be working fine

I tried everything but can't find where I'm doing wrong

Also I have two forms, but I'm showing only the first form's code because they are pretty much the same

I already checked my link tags, but they don't seems to be wrong at all

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. $().ready(function() {
  2.   $(&quot;#formFisica&quot;).validate({
  3.     onkeyup: false,
  4.     onfocusout: false,
  5.     rules: {
  6.       nomeFisica: {
  7.         required: true,
  8.       },
  9.       cpfFisica: {
  10.         required: true,
  11.         number: true,
  12.         maxlength: 11
  13.       },
  14.       dddFisica: {
  15.         required: true,
  16.         number: true,
  17.         maxlength: 2
  18.       },
  19.       telFisica: {
  20.         required: true,
  21.         number: true,
  22.         maxlength: 9
  23.       },
  24.       emailFisica: {
  25.         required: true,
  26.         email: true
  27.       },
  28.       confEmailFisica: {
  29.         required: true,
  30.         equalTo: &quot;#emailFisica&quot;
  31.       },
  32.       senhaFisica: {
  33.         required: true,
  34.         minlength: 6,
  35.         maxlength: 15
  36.       },
  37.       confSenhaFisica: {
  38.         required: true,
  39.         equalTo: &quot;#senhaFisica&quot;
  40.       },
  41.     },
  42.     messages: {
  43.       nomeFisica: {
  44.         required: &quot;Esse campo n&#227;o pode ser vazio&quot;
  45.       },
  46.       cpfFisica: {
  47.         required: &quot;Esse campo n&#227;o pode ser vazio&quot;,
  48.         number: &quot;Esse campo s&#243; aceita n&#250;meros&quot;,
  49.       },
  50.       dddFisica: {
  51.         required: &quot;Esse campo n&#227;o pode ser vazio&quot;,
  52.         number: &quot;Esse campo s&#243; aceita n&#250;meros&quot;,
  53.       },
  54.       telFisica: {
  55.         required: &quot;Esse campo n&#227;o pode ser vazio&quot;,
  56.         number: &quot;Esse campo s&#243; aceita n&#250;meros&quot;,
  57.       },
  58.       emailFisica: {
  59.         required: &quot;Esse campo n&#227;o pode ser vazio&quot;,
  60.         email: &quot;Digite um endere&#231;o de e-mail valido&quot;
  61.       },
  62.       confEmailFisica: {
  63.         required: &quot;Esse campo n&#227;o pode ser vazio&quot;,
  64.         equalTo: &quot;Os e-mails n&#227;o correspondem&quot;
  65.       },
  66.       senhaFisica: {
  67.         required: &quot;Esse campo n&#227;o pode ser vazio&quot;
  68.       },
  69.       confSenhaFisica: {
  70.         required: &quot;Esse campo n&#227;o pode ser vazio&quot;,
  71.         equalTo: &quot;As senhas n&#227;o correspondem&quot;
  72.       },
  73.     }
  74.   });
  75. })

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  2. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js&quot; integrity=&quot;sha512-rstIgDs0xPgmG6RX1Aba4KV5cWJbAMcvRCVmglpam9SoHZiUCyQVDdH2LPlxoHtrv17XWblE/V/PP+Tr04hbtA==&quot; crossorigin=&quot;anonymous&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/script&gt;
  3. &lt;div class=&quot;container text-center&quot;&gt;
  4. &lt;div class=&quot;form-check form-check-inline&quot;&gt;
  5. &lt;input class=&quot;form-check-input&quot; type=&quot;radio&quot; value=&quot;&quot; id=&quot;flexCheckDefaultFisica&quot;&gt;
  6. &lt;label for=&quot;flexCheckDefaultFisica&quot; class=&quot;form-check-label&quot;&gt;Pessoa F&#237;sica&lt;/label&gt;
  7. &lt;/div&gt;
  8. &lt;div class=&quot;form-check form-check-inline&quot;&gt;
  9. &lt;input class=&quot;form-check-input&quot; type=&quot;radio&quot; value=&quot;&quot; id=&quot;flexCheckDefaultJuridica&quot;&gt;
  10. &lt;label for=&quot;flexCheckDefaultJuridica&quot; class=&quot;form-check-label&quot;&gt;Pessoa Jur&#237;dica&lt;/label&gt;
  11. &lt;/div&gt;
  12. &lt;/div&gt;
  13. &lt;/div&gt;
  14. &lt;div class=&quot;container pt-2&quot; id=&quot;containerFisica&quot;&gt;
  15. &lt;form id=&quot;formFisica&quot;&gt;
  16. &lt;div class=&quot;form-group pt-2 pb-2&quot;&gt;
  17. &lt;label for=&quot;exampleInputEmail1&quot;&gt;Nome completo&lt;/label&gt;
  18. &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;nomeFisica&quot; aria-describedby=&quot;emailHelp&quot; placeholder=&quot;Insira seu nome&quot; required/&gt;
  19. &lt;/div&gt;
  20. &lt;div class=&quot;form-group pt-2 pb-2&quot;&gt;
  21. &lt;label for=&quot;exampleInputPassword1&quot;&gt;CPF&lt;/label&gt;
  22. &lt;input type=&quot;number&quot; class=&quot;form-control&quot; id=&quot;cpf&quot; placeholder=&quot;Insira seu CPF&quot; /&gt;
  23. &lt;/div&gt;
  24. &lt;div class=&quot;form-group pt-2 pb-2&quot;&gt;
  25. &lt;label for=&quot;exampleInputPassword1&quot;&gt;DDD&lt;/label&gt;
  26. &lt;input type=&quot;number&quot; class=&quot;form-control&quot; id=&quot;dddFisica&quot; placeholder=&quot;DDD&quot; /&gt;
  27. &lt;/div&gt;
  28. &lt;div class=&quot;form-group pt-2 pb-2&quot;&gt;
  29. &lt;label for=&quot;exampleInputPassword1&quot;&gt;Telefone&lt;/label&gt;
  30. &lt;input type=&quot;number&quot; class=&quot;form-control&quot; id=&quot;telFisica&quot; placeholder=&quot;N&#250;mero de telefone&quot; /&gt;
  31. &lt;/div&gt;
  32. &lt;div class=&quot;form-group pt-2 pb-2&quot;&gt;
  33. &lt;label for=&quot;exampleInputEmail1&quot;&gt;E-mail&lt;/label&gt;
  34. &lt;input type=&quot;email&quot; class=&quot;form-control&quot; id=&quot;emailFisica&quot; aria-describedby=&quot;emailHelp&quot; placeholder=&quot;Insira seu e-mail&quot; /&gt;
  35. &lt;/div&gt;
  36. &lt;div class=&quot;form-group pt-2 pb-2&quot;&gt;
  37. &lt;label for=&quot;exampleInputEmail1&quot;&gt;Confirmar E-mail&lt;/label&gt;
  38. &lt;input type=&quot;email&quot; class=&quot;form-control&quot; id=&quot;confEmailFisica&quot; aria-describedby=&quot;emailHelp&quot; placeholder=&quot;Confirme seu e-mail&quot; /&gt;
  39. &lt;/div&gt;
  40. &lt;div class=&quot;form-group pt-2 pb-2&quot;&gt;
  41. &lt;label for=&quot;exampleInputPassword1&quot;&gt;Senha&lt;/label&gt;
  42. &lt;input type=&quot;password&quot; class=&quot;form-control&quot; id=&quot;senhaFisica&quot; placeholder=&quot;Insira sua senha&quot; /&gt;
  43. &lt;/div&gt;
  44. &lt;div class=&quot;form-group pt-2 pb-2&quot;&gt;
  45. &lt;label for=&quot;exampleInputPassword1&quot;&gt;Confirmar Senha&lt;/label&gt;
  46. &lt;input type=&quot;password&quot; class=&quot;form-control&quot; id=&quot;confSenhaFisica&quot; placeholder=&quot;Confirme sua senha&quot; /&gt;
  47. &lt;/div&gt;
  48. &lt;div class=&quot;form-check pt-2&quot;&gt;
  49. &lt;input type=&quot;radio&quot; class=&quot;form-check-input&quot; id=&quot;aceitoEmailFisica&quot; /&gt;
  50. &lt;label class=&quot;form-check-label&quot; for=&quot;aceitoEmailFisica&quot;&gt;Aceito receber e-mails&lt;/label&gt;
  51. &lt;/div&gt;
  52. &lt;div class=&quot;form-check pt-2&quot;&gt;
  53. &lt;input type=&quot;radio&quot; class=&quot;form-check-input&quot; value=&quot;&quot; id=&quot;flexCheckChecked&quot; checked/&gt;
  54. &lt;label class=&quot;form-check-label&quot; for=&quot;flexCheckChecked&quot;&gt;Aceito as pol&#237;ticas de privacidade&lt;/label&gt;
  55. &lt;/div&gt;
  56. &lt;input type=&quot;submit&quot; value=&quot;Validate!&quot; /&gt;
  57. &lt;/form&gt;
  58. &lt;/div&gt;
  59. &lt;div class=&quot;container pt-2&quot; id=&quot;containerJuridica&quot;&gt;
  60. &lt;form id=&quot;formJuridica&quot;&gt;
  61. &lt;div class=&quot;form-group pt-2 pb-2&quot;&gt;
  62. &lt;label for=&quot;exampleInputEmail1&quot;&gt;Raz&#227;o Social&lt;/label&gt;
  63. &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;razaoSocial&quot; aria-describedby=&quot;emailHelp&quot; placeholder=&quot;Raz&#227;o Social&quot; required&gt;
  64. &lt;/div&gt;
  65. &lt;div class=&quot;form-group pt-2 pb-2&quot;&gt;
  66. &lt;label for=&quot;exampleInputPassword1&quot;&gt;CNPJ&lt;/label&gt;
  67. &lt;input type=&quot;number&quot; class=&quot;form-control&quot; id=&quot;cnpj&quot; placeholder=&quot;Insira seu CNPJ&quot;&gt;
  68. &lt;/div&gt;
  69. &lt;div class=&quot;form-group pt-2 pb-2&quot;&gt;
  70. &lt;label for=&quot;exampleInputPassword1&quot;&gt;DDD&lt;/label&gt;
  71. &lt;input type=&quot;number&quot; class=&quot;form-control&quot; id=&quot;dddJuridica&quot; placeholder=&quot;DDD&quot;&gt;
  72. &lt;/div&gt;
  73. &lt;div class=&quot;form-group pt-2 pb-2&quot;&gt;
  74. &lt;label for=&quot;exampleInputPassword1&quot;&gt;Telefone&lt;/label&gt;
  75. &lt;input type=&quot;number&quot; class=&quot;form-control&quot; id=&quot;telJuridica&quot; placeholder=&quot;N&#250;mero de telefone&quot;&gt;
  76. &lt;/div&gt;
  77. &lt;div class=&quot;form-group pt-2 pb-2&quot;&gt;
  78. &lt;label for=&quot;exampleInputEmail1&quot;&gt;E-mail&lt;/label&gt;
  79. &lt;input type=&quot;email&quot; class=&quot;form-control&quot; id=&quot;emailJuridica&quot; aria-describedby=&quot;emailHelp&quot; placeholder=&quot;Insira seu e-mail&quot;&gt;
  80. &lt;/div&gt;
  81. &lt;div class=&quot;form-group pt-2 pb-2&quot;&gt;
  82. &lt;label for=&quot;exampleInputEmail1&quot;&gt;Confirmar E-mail&lt;/label&gt;
  83. &lt;input type=&quot;email&quot; class=&quot;form-control&quot; id=&quot;confEmailJuridica&quot; aria-describedby=&quot;emailHelp&quot; placeholder=&quot;Confirme seu e-mail&quot;&gt;
  84. &lt;/div&gt;
  85. &lt;div class=&quot;form-group pt-2 pb-2&quot;&gt;
  86. &lt;label for=&quot;exampleInputPassword1&quot;&gt;Senha&lt;/label&gt;
  87. &lt;input type=&quot;password&quot; class=&quot;form-control&quot; id=&quot;senhaJuridica&quot; placeholder=&quot;Insira sua senha&quot;&gt;
  88. &lt;/div&gt;
  89. &lt;div class=&quot;form-group pt-2 pb-2&quot;&gt;
  90. &lt;label for=&quot;exampleInputPassword1&quot;&gt;Confirmar Senha&lt;/label&gt;
  91. &lt;input type=&quot;password&quot; class=&quot;form-control&quot; id=&quot;confSenhaJuridica&quot; placeholder=&quot;Confirme sua senha&quot;&gt;
  92. &lt;/div&gt;
  93. &lt;div class=&quot;form-check pt-2&quot;&gt;
  94. &lt;input type=&quot;radio&quot; class=&quot;form-check-input&quot; id=&quot;aceitoEmailJuridica&quot;&gt;
  95. &lt;label class=&quot;form-check-label&quot; for=&quot;aceitoEmailJuridica&quot;&gt;Aceito receber e-mails&lt;/label&gt;
  96. &lt;/div&gt;
  97. &lt;div class=&quot;form-check pt-2&quot;&gt;
  98. &lt;input type=&quot;radio&quot; class=&quot;form-check-input&quot; value=&quot;&quot; id=&quot;flexCheckChecked&quot; checked&gt;
  99. &lt;label class=&quot;form-check-label&quot; for=&quot;flexCheckChecked&quot;&gt;Aceito as pol&#237;ticas de privacidade&lt;/label&gt;
  100. &lt;/div&gt;
  101. &lt;input type=&quot;submit&quot; value=&quot;Validar&quot;&gt;
  102. &lt;/form&gt;
  103. &lt;/div&gt;
  104. &lt;script src=&quot;./validation.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  105. &lt;script src=&quot;./script.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

<!-- end snippet -->

答案1

得分: 0

根据文档，插件要求所有输入字段都必须包含name属性。在指定规则和消息时，应使用name属性。

英文:

As per documentation, the plugin requires that all the input fields should contain a name attribute.
When specifying the rules and messages inside .validate() function, you should use the name attribute.

huangapple
  • 本文由 发表于 2023年4月19日 21:46:51
  • 转载请务必保留本文链接：https://go.coder-hub.com/76055304.html
  • forms
  • javascript
  • plugins
  • validation
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定