jQuery表单验证不起作用

前端之家收集整理的这篇文章主要介绍了jQuery表单验证不起作用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我花了好几个小时,我不知道为什么这个 jquery validate()不起作用.我终于将它分解为最小值,但仍然无法正常工作.这是实际代码
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
  5. <script type="text/javascript" src="jquery.validate.min.js"></script>
  6.  
  7. <script>
  8.  
  9. $(document).on("click","#submit",function() {
  10.  
  11. $("#form").validate({
  12. rules: {
  13. input: { required: true}
  14. },messages: {
  15. input: { required: "required" }
  16. },ignore: "",errorClass: 'fieldError',onkeyup: false,onblur: false,errorElement:'label',submitHandler: function() {
  17. alert("alert");
  18. }
  19. });
  20.  
  21. return false;
  22. });
  23.  
  24. </script>
  25.  
  26. </head>
  27. <body>
  28.  
  29. <form id="form">
  30. <input type="text" value="" name="input" id="input" />
  31. </form>
  32. <a href="#" id="submit">submit</a>
  33.  
  34. </body>
  35. </html>

我错过了一些明显的东西吗?我没有错误,点击“提交”时没有任何反应.

更新:我已将“click”事件之外的validate()移动到文档“ready”事件中,现在它在文档加载时触发,在控制台中输出消息“没有选中,无法验证,什么都不返回”
这不是我希望它显然工作的方式,所以我如何将它附加到click事件?

更新2:感谢@NXT我终于进行了验证运行,但是“submitHandler”仍然无法运行,我需要使用它来进行Ajax调用,因为必须在没有页面重新加载的情况下提交表单.

解决方法

您是否故意将提交按钮放在表单之外?我修改了它,在点击时提交表单.
它现在有效 – 出现验证消息,以及警报消息(当您提交包含某些内容的表单时).要么使用下面的代码部分,要么在线尝试 – http://jsfiddle.net/Vcmfs/

头:

  1. <script>
  2. $(function(){
  3. $("#form").validate({
  4. rules: {
  5. input: { required: true}
  6. },submitHandler: function() {
  7. alert("alert");
  8. }
  9. });
  10.  
  11. $("#submit").click(function(){
  12. $("#form").submit();
  13. return false;
  14. });
  15. });
  16. </script>

身体:

  1. <form id="form">
  2. <input type="text" value="" name="input" id="input" />
  3. </form>
  4. <a href="#" id="submit">submit</a>

猜你在找的jQuery相关文章