Geek Answers Handbook

JQuery.validate plugin and ajax form submission

I can't make me work for life. Validation errors are correct, I do not get syntax errors, but nothing happens. The form is simply sent to the page. I cannot get warnings about successes or errors for work ...

<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>

This is 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 = ' someone@example.com '; $email = ' email@example.com '; $fromaddress = " you@example.com "; $fromname = "Online Contact"; require("phpmailer.php"); $mail = new PHPMailer(); $mail->From = " you@you.com "; $mail->FromName = "Contact Form"; $mail->AddAddress(" another_address@example.com ","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 = ' your_email@example.com '; $subject = 'Contact form failed'; $content = $body; mail($recipient, $subject, $content, "From: mail@yourdomain.com \r\nReply-To: $email\r\nX-Mailer: DT_formmail"); exit; } ?>
+4
source share
3 answers

You have submitHandler inside rules , it should be next to it, for example:

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

Also note the addition of the document.ready handler for security.

+13
source

Just to help update this post.

Encapsulate with:

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

Remove submitHandler from the rules:

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

Add cache: false to prevent the form from being returned as a cache:

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

Use done () and fail () instead of success and error:

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

Everybody is here:

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

Add a no-cache header to the process.php header to prevent browser form caching:

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

Extract your submitHandler from your rules :-)

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

More articles:


All Articles