JQuery表单validation和提交脚本冲突

构建了一个简单的JQuery / Ajax简报注册表单，然后在事后添加了JQueryvalidation。 我对javascript / jquery不是很有经验; 几天来一直在努力，我的想法很平淡。

每个脚本单独工作。 如果删除了提交代码，validation器可以正常工作（虽然它可以在指定表单操作URL的情况下正常工作）。 提交脚本与删除的validation程序代码完美配合。 但是，如果两者都没有，则不会进行validation，表单仍然可以通过提交脚本提交。

我所有尝试整合两者的努力都失败了。

显然我错过了一些相当重要的东西。 即使是正确方向上的丝毫推动也会受到极大的赞赏

这是完整的代码：

      $(document).ready(function(){ // run validator, specifies name of css div that will be displayed // on error and hide when corrected $("#nl").validate({ errorContainer: "#errorcontainer", }); });    $(function() { // These first three lines of code compensate for Javascript being turned on and off. // It changes the submit input field from a type of "submit" to a type of "button". var paraTag = $('input#submit').parent('b'); $(paraTag).children('input').remove(); $(paraTag).append(''); $('input#submit').click(function() { $("#response").css("display", "none"); $("#loading").css("display", "block"); $.ajax({ type: 'GET', url: 'http://app.icontact.com/icp/signup.php', data: $("form").serialize(), complete: function(results) { setTimeout(function() { $("#loading").css("display", "none"); $("#response").css("display", "block"); }, 1500); } }); // end ajax }); });       
 
 
Sign up for the NCMP newsletter 
 
  
 
  
    
from submit script - shows on success
 
 
 
 
from validator script - shows on error
   

谢谢，-Bob

Answer 1

看起来jQueryvalidation不会阻止click 。 这是有道理的; 我确定插件可能正在进入submit事件。

使用jQueryvalidation时，集成AJAXfunction的最佳选择可能是在submitHandler回调中。 因此，应该只是简单地移动一些代码：

 $("#nl").validate({ errorContainer: "#errorcontainer", submitHandler: function () { $("#response").css("display", "none"); $("#loading").css("display", "block"); $.ajax({ type: 'GET', url: 'http://app.icontact.com/icp/signup.php', data: $("form").serialize(), complete: function(results) { setTimeout(function() { $("#loading").css("display", "none"); $("#response").css("display", "block"); }, 1500); } }); } }); 

submitHandler回调中的代码替换了表单提交的默认操作（即执行vanilla HTTP请求）。