jQuery.validate插件和ajax表单提交

我不能为我的生活得到这个工作。 validation错误看起来很好，我没有语法错误，但没有任何反应。 表单只是提交到页面。 我无法获得成功或错误提醒工作……

 
 
 
 Name: (required)  
 
 E–Mail: (required / private)  
 
 Subject: (required)  
 
 Message: (required)  Please, no XHTML. 
 
  
 
 
 
  $("#contact").validate({ rules: { name: {required: true}, email: {required: true}, subject: {requred: true}, submitHandler: function() { $.ajax({ type: "POST", url: "/contact/process.php", data: formSerialize, timeout: 3000, success: function() {alert('works');}, error: function() {alert('failed');} }); return false; } } });  

这是process.php：

  0)) { $name = stripslashes(strip_tags($_POST['name'])); } else {$name = 'No name entered';} if ((isset($_POST['email'])) && (strlen(trim($_POST['email'])) > 0)) { $email = stripslashes(strip_tags($_POST['email'])); } else {$email = 'No email entered';} if ((isset($_POST['message'])) && (strlen(trim($_POST['message'])) > 0)) { $message = stripslashes(strip_tags($_POST['message'])); } else {$message = 'No message entered';} if ((isset($_POST['subject'])) && (strlen(trim($_POST['subject'])) > 0)) { $subject = stripslashes(strip_tags($_POST['subject'])); } else {$message = 'No subject entered';} ob_start(); ?>      
 
 
Name
 
 
 
 
Email
 
 
 
 
Message
 
 
 
   From = "[e-mail]"; $mail->FromName = "Contact Form"; $mail->AddAddress("[e-mail]","Name 1"); $mail->WordWrap = 50; $mail->IsHTML(true); $mail->Subject = $subject; $mail->Body = $body; $mail->AltBody = "This is the text-only body"; if(!$mail->Send()) { $recipient = '[e-mail]'; $subject = 'Contact form failed'; $content = $body; mail($recipient, $subject, $content, "From: [e-mail]\r\nReply-To: $email\r\nX-Mailer: DT_formmail"); exit; } ?> 

Answer 1

您在 rules有submitHandler ，它应该在它旁边 ，如下所示：

 $(function() { $("#contact").validate({ rules: { name: {required: true}, email: {required: true}, subject: {requred: true} }, submitHandler: function(form) { $.ajax({ type: "POST", url: "/contact/process.php", data: $(form).serialize(), timeout: 3000, success: function() {alert('works');}, error: function() {alert('failed');} }); return false; } }); }); 

还要注意添加document.ready处理程序是安全的。

Answer 2

只是为了帮助使这篇文章更新。

封装：

 $(document).ready(function() { ALL YOUR CODE GOES HERE } 

从规则中删除submitHandler：

 rules: { name: {required: true}, email: {required: true}, subject: {requred: true} }, submitHandler: function(form) {..... 

添加缓存：false，以帮助阻止浏览器表单返回缓存的内容：

 request = $.ajax({ type: "POST", cache: false, url: "/contact/process.php", data: $(form).serialize(), timeout: 3000 }); 

现在使用done（）和fail（）而不是成功和错误：

 // Called on success. request.done(function(msg) { alert('works'); }); // Called on failure. request.fail(function (jqXHR, textStatus, errorThrown){ alert('failed'); // log the error to the console console.error( "The following error occurred: " + textStatus, errorThrown ); }); 

这是整个事情：

 $(document).ready(function() { $("#contact").validate({ rules: { name: {required: true}, email: {required: true}, subject: {requred: true} }, submitHandler: function(form) { request = $.ajax({ type: "POST", cache: false, url: "/contact/process.php", data: $(form).serialize(), timeout: 3000 }); // Called on success. request.done(function(msg) { alert('works'); }); // Called on failure. request.fail(function (jqXHR, textStatus, errorThrown){ alert('failed'); // log the error to the console console.error( "The following error occurred: " + textStatus, errorThrown ); }); return false; } }); }); 

将no-cache添加到process.php标头以帮助阻止浏览器表单缓存内容：

Answer 3

把你的submitHandler从你的规则中删除:-)

 $("#contact").validate({ rules: { name: {required: true}, email: {required: true}, subject: {requred: true} }, submitHandler: function() { $.ajax({ type: "POST", url: "/contact/process.php", data: formSerialize, timeout: 3000, success: function() {alert('works');}, error: function() {alert('failed');} }); return false; } });