jQuery.valider le plugin et l'ajax formulaire de soumission

Je ne peux pas pour la vie de me débarrasser de ce travail. Les erreurs de validation apparaissent fine, je n'ai pas d'erreurs de syntaxe, mais rien ne se passe. La forme juste soumet à la page. Je ne peux pas obtenir le succès ou d'erreur alertes pour travailler...

<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;
}
?>

mmdp certains se couper de process.php...

OriginalL'auteur Chris | 2010-11-16

14

Vous avez submitHandler dans rules, il devrait être à côté de, 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;
}
});
});
```
Noter également l'ajout de la document.ready gestionnaire pour être sûr.

Belle prise. Qui ensanglantent l'indentation fait-il difficile de choisir.
ne fonctionne toujours pas 🙁
Je vais mettre à jour ci-dessus avec process.php
définir "ne fonctionne pas"? Voyez-vous des erreurs de validation?
J'obtiens des erreurs de validation, mais la forme ne donne pas le message de réussite. Il vient de se soumet à lui-même.

OriginalL'auteur Nick Craver

Juste pour aider à apporter ce post à jour.

Encapsuler avec:

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

Supprimer submitHandler de règles:

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

Ajouter de la mémoire cache: false, pour aider à empêcher le navigateur de formulaire de retour en cache de contenu:

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

Utilisation done() et fail() au lieu de réussite et d'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
);
});

Voici 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 l'en-tête pour aider à empêcher le navigateur de formulaire de mise en cache de contenu:

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

OriginalL'auteur Vince

Prendre votre submitHandler de votre règlement 🙂

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

Je pense que j'ai été un peu lent...

OriginalL'auteur wajiw

Vous devez vous connecter pour publier un commentaire.