jQuery.validate插件和ajax表單提交

我不能爲了我的生活得到這個工作。驗證錯誤顯示正常，我沒有得到語法錯誤，但沒有任何反應。表單只是提交給頁面。我不能讓成功或錯誤警報要麼工作...jQuery.validate插件和ajax表單提交

<form id="contact" class="validation" method="post" action=""> 
<fieldset> 
<ol class="comment_fields"> 
    <li> 
     <label for="name">Name: <span>(required)</span></label> 
     <input type="text" name="name" id="name" class="required" minlength="4" tabindex="1" /> 
    </li> 
    <li> 
     <label for="email">E&ndash;Mail: <span>(required/private)</span></label> 
     <input type="text" name="email" id="email" class="required email" tabindex="2" /> 
    </li> 
    <li> 
     <label for="subject">Subject: <span>(required)</span></label> 
     <input type="text" name="subject" id="subject" class="required" minlength="4" tabindex="3" /> 
    </li> 
    <li class="comment_area"> 
     <label for="comment">Message: <span>(required)</span></label> 
     <textarea name="message" id="message" rows="8" cols="8" class="required" minlength="10" tabindex="4"></textarea> 
     <cite>Please, no XHTML.</cite> 
    </li> 
    <li class="submit"> 
     <input type="submit" class="button blue" value="Send Message" id="submit" tabindex="5" /> 
    </li> 
</ol> 
</fieldset> 
</form> 

<script type="text/javascript"> 

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

     return false; 
    } 
} 
}); 

</script>

這是process.php：

<?php 
    if ((isset($_POST['name'])) && (strlen(trim($_POST['name'])) > 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(); 
?> 
<html> 
    <head> 
     <style type="text/css"></style> 
    </head> 
    <body> 
     <table width="550" border="1" cellspacing="2" cellpadding="2"> 
      <tr bgcolor="#eeffee"> 
       <td>Name</td> 
       <td><?=$name;?></td> 
      </tr> 
      <tr bgcolor="#eeeeff"> 
       <td>Email</td> 
       <td><?=$email;?></td> 
      </tr> 
      <tr bgcolor="#eeffee"> 
       <td>Message</td> 
       <td><?=$message;?></td> 
      </tr> 
     </table> 
    </body> 
</html> 

<? 
    $body = ob_get_contents(); 

    $to = '[email protected]'; 
    $email = '[email protected]'; 
    $fromaddress = "[email protected]"; 
    $fromname = "Online Contact"; 

    require("phpmailer.php"); 

    $mail = new PHPMailer(); 

    $mail->From  = "[email protected]"; 
    $mail->FromName = "Contact Form"; 
    $mail->AddAddress("[email protected]","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 = '[email protected]'; 
     $subject = 'Contact form failed'; 
     $content = $body;  
     mail($recipient, $subject, $content, "From: [email protected]\r\nReply-To: $email\r\nX-Mailer: DT_formmail"); 
     exit; 
    } 
?>

來源

2010-11-16 Chris

人力資源管理模式得到了一些切斷過程。 php ... – Chris 2010-11-16 21:21:07

你有submitHandler內rules，它應該是旁邊它是這樣的：

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

還要注意增加了document.ready處理程序是安全的。

來源

2010-11-16 21:05:27

好的。血腥縮進使得難以挑選出來。 – 2010-11-16 21:06:37

仍然沒有工作:( – Chris 2010-11-16 21:17:51

我會更新以上process.php – Chris 2010-11-16 21:18:26

把你submitHandler出你的規則:-)

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

          return false; 
         } 
        });

來源

2010-11-16 21:07:37 wajiw

裏面我想我對這個有點慢...... – wajiw 2010-11-16 21:08:02

只是爲了幫助實現這個帖子上的更新。

包封物有：從規則

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

刪除submitHandler：

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

添加緩存：假的，有助於防止瀏覽器的形式回到緩存的內容：

request = $.ajax({ 
    type: "POST", 
    cache: false, 
    url: "<?php bloginfo("template_directory"); ?>/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 
    ); 
});

這裏的整個事情：

$(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: "<?php bloginfo("template_directory"); ?>/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; 
     } 
    }); 
});

添加無緩存到process.php頭球幫助防止瀏覽器形式的緩存內容：

<?=header("cache-control: no-cache");?>

來源

2013-07-13 06:09:33 Vince

jQuery.validate插件和ajax表單提交

回答

相關問題