jQuery表单validation和Ajax提交的问题

我使用jQuery创建了一个动态表单，它有两个部分，一旦第一部分正确完成，第二部分加载而没有页面刷新。

我的问题是，当第二部分完成后，我需要执行validation，显然确保没有错误的数据发送到服务器。 发生的事情是，如果我第二次单击提交按钮提交不正确的数据，validation将在初始单击提交按钮时起作用，但即使没有在表单输入字段中修复数据也是如此？

我在网上搜索了一个答案，并尝试了一些不同的东西：

我尝试将第二个提交方法更改为：

$('infoform').submit(function() { // .. stuff 

}）;

但这没有用，也有人建议我尝试：

 $('#submit_second').submit(function(evt){ evt.preventDefault(); ... 

}）;

但这也没有用，只能阻止validation完全工作？

我想要的是显然要让validation继续检查错误，直到输入的数据是正确的，并且一旦数据不再出现错误，然后使用ajax调用发送？

表单的代码是：

  
 
 <!--
WANT A FREE
SOCIAL MEDIA
AUDIT?
--> 
 
 Facebook or Twitter page address:  
  
 
 
 
 Your Full Name.  
  
 
 
 Your email address.  
 
 
 Your contact number.  
  
 
 
 <!---->  
  

这是我的jQuery，我已经尝试将两个“submit_second”函数合并为一个，但是当单击第二个提交按钮时，这会停止发生的任何事情！

 $('#submit_second').click(function(){ //remove classes $('#second_step input').removeClass('error').removeClass('valid'); var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; var phonePattern = /^\+?[0-9]{0,15}$/ ; var fields = $('#second_step input[type=text]'); var error = 0; fields.each(function(){ var value = $(this).val(); if( value.length<1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) { $(this).addClass('error'); $(this).effect("shake", { times:3 }, 50); error++; } else { $(this).addClass('valid'); } if( value.length<1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='phone' && !phonePattern.test(value) ) ) { $(this).addClass('error'); $(this).effect("shake", { times:3 }, 50); error++; } else { $(this).addClass('valid'); } }); $('#submit_second').click(function(){ url =$("input#url").val(); yourname =$("input#yourname").val(); email =$("input#email").val(); phone =$("input#phone").val(); //send information to server var dataString = 'url='+ url + '&yourname=' + yourname + '&email=' + email + '&phone=' + phone; //alert (dataString); $.ajax({ type: "POST", url: "#", data: "url="+url+"&yourname="+yourname+"&email="+email+'&phone=' + phone, cache: false, success: function(data) { console.log("form submitted"); alert(dataString); } }); return false; }); 

Answer 1

你有一个提交按钮和一个提交事件，这不是更合乎逻辑。 然后，提交function将运行validation，并根据其结果提交或不提交表单。

Answer 2

好吧，所以在经过多次修补代码并多次尝试同样的事情后，我终于让它按照我想要的方式工作了！

我已经将Ajax调用放回到一个方法以及validation检查中，并找出我出错的地方……语法错误！ 在Ajax调用提交数据之前，我忘了关闭validation检查的括号！ 我的错！ 我对此很陌生，所以我很高兴终于让它工作了！

  $('#submit_second').click(function(){ //remove classes $('#second_step input').removeClass('error').removeClass('valid'); var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; var phonePattern = /^\+?[0-9]{0,15}$/ ; var fields = $('#second_step input[type=text]'); var error = 0; fields.each(function(){ var value = $(this).val(); if( value.length<1 /*|| value==field_values[$(this).attr('id')]*/ || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) { $(this).addClass('error'); $(this).effect("shake", { times:3 }, 50); error++; } else { $(this).addClass('valid'); } if( value.length<1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='phone' && !phonePattern.test(value) ) ) { $(this).addClass('error'); $(this).effect("shake", { times:3 }, 50); console.log("running"); error++; } else { $(this).addClass('valid'); } }); if(error==0) { url =$("input#url").val(); yourname =$("input#yourname").val(); email =$("input#email").val(); phone =$("input#phone").val(); //send information to server var dataString = 'url='+ url + '&yourname=' + yourname + '&email=' + email + '&phone=' + phone; //alert (dataString); $.ajax({ type: "POST", url: "http://clients.socialnetworkingsolutions.com/infobox/contact/", data: "url="+url+"&yourname="+yourname+"&email="+email+'&phone=' + phone, cache: false, success: function(data) { console.log("form submitted"); alert(dataString); } }); return false; } });