jQuery.validate plugin et soumission de formulaire ajax

Je ne peux pas pour la vie de moi obtenir ce pour travailler. Les erreurs de validation semblent correctes, je n'ai pas d'erreurs de syntaxe mais rien ne se passe. Le formulaire se contente de soumettre à la page. Je ne peux pas obtenir les alertes de succès ou d'erreur de travailler soit ...jQuery.validate plugin et soumission de formulaire 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>

C'est 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; 
    } 
?>

Source

2010-11-16 Chris

hrmm hors du processus certains a été coupé. php ... – Chris

Vous avez submitHandlerau seinrules, il devrait être à côté il, comme ceci:

$(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; 
     } 
    }); 
});

Notez également l'ajout du document.ready handler pour être sûr.

Source

2010-11-16 21:05:27

Belle prise. Cet indentation sanglante le rend difficile à repérer. –

ne fonctionne toujours pas :( – Chris

Je vais mettre à jour ci-dessus avec process.php – Chris

Prenez votre submitHandler de vos règles :-)

$("#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; 
         } 
        });

Source

2010-11-16 21:07:37 wajiw

je suppose que j'étais un peu lent sur celui-là ... – wajiw

Juste pour aider à mettre ce poste à jour.

Encapsulate avec:

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

Supprimer submitHandler des règles:

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

Ajouter cache: false, pour aider à prévenir le formulaire de navigateur le renvoi contenu mis en cache:

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

utilisation faite() et fail() au lieu de succès et erreur maintenant:

// 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 
    ); 
});

est ici la chose:

$(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; 
     } 
    }); 
});

Ajouter no-cache à process.php-tête pour aider à empêcher le contenu de la mise en cache sous forme de navigateur:

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

Source

2013-07-13 06:09:33 Vince

jQuery.validate plugin et soumission de formulaire ajax

Répondre

Questions connexes