我不能为我的生活让这个工作。验证错误看起来很好,我没有语法错误,但没有任何反应。表单只是提交到页面。我无法获得成功或错误警报......
<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–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 = '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;
}
?>
答案 0 :(得分:14)
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
处理程序是安全的。
答案 1 :(得分: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: "<?php bloginfo("template_directory"); ?>/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: "<?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标头添加no-cache以帮助阻止浏览器表单缓存内容:
<?=header("cache-control: no-cache");?>
答案 2 :(得分:0)
将您的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;
}
});