Javascript Ajax表单在容器div中提交和验证
[----嘿，伙计们，谢谢你们的帮助，但这个问题已经解决了----] 如果我所尝试的几乎是不可能的，请告诉我 好的，我希望创建一个tabable表单，并且tabs必须动态地将链接路径加载到指定的container div中 好的，我有我的选项卡导航和表单加载，但当我尝试验证这些表单时，它们会跳出容器区域，跳转到一个全新的页面。现在我想要的是将表单加载到指定的div中，并在该div中进行验证，当按下submit/send按钮时，我希望该表单连接到php发送脚本，在成功提交后，我希望在相同的指定div中显示一条成功消息。因此，基本上，我希望所有内容都像包含在iframe中一样运行 求你了，我在恳求别人帮助我。我试了又试，但没有任何效果：这是我的代码： html标记：Javascript Ajax表单在容器div中提交和验证,javascript,php,jquery,ajax,validation,Javascript,Php,Jquery,Ajax,Validation,[----嘿，伙计们，谢谢你们的帮助，但这个问题已经解决了----] 如果我所尝试的几乎是不可能的，请告诉我 好的，我希望创建一个tabable表单，并且tabs必须动态地将链接路径加载到指定的container div中 好的，我有我的选项卡导航和表单加载，但当我尝试验证这些表单时，它们会跳出容器区域，跳转到一个全新的页面。现在我想要的是将表单加载到指定的div中，并在该div中进行验证，当按下submit/send按钮时，我希望该表单连接到php发送脚本，在成功提交后，我希望在相同的指定di
<section id="form-tab-block">
<div id="form-menu-wrapper">
<div id="form-tab-menu">
<a class="menu_top" href="form/form_one.html">Form one</a>
<a class="menu_top" href="form/form.html">Form two</a>
<a class="menu_top" href="form/form.html">Form three</a>
<a class="menu_top" href="contactform/index.php" Onclick="return false;">Form four</a>
</div>
<div id="content_area"></div>
</div>
</section>
<?php
//If the form is submitted
if(isset($_POST['submit'])) {
//Check to make sure that the name field is not empty
if(trim($_POST['contactname']) == '') {
$hasError = true;
} else {
$name = trim($_POST['contactname']);
}
//Check to make sure that the subject field is not empty
if(trim($_POST['subject']) == '') {
$hasError = true;
} else {
$subject = trim($_POST['subject']);
}
//Check to make sure sure that a valid email address is submitted
if(trim($_POST['email']) == '') {
$hasError = true;
} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
$hasError = true;
} else {
$email = trim($_POST['email']);
}
//Check to make sure comments were entered
if(trim($_POST['message']) == '') {
$hasError = true;
} else {
if(function_exists('stripslashes')) {
$comments = stripslashes(trim($_POST['message']));
} else {
$comments = trim($_POST['message']);
}
}
//If there is no error, send the email
if(!isset($hasError)) {
$emailTo = 'your@emailaddress.com'; //Put your own email address here
$body = "Name: $name \n\nEmail: $email \n\nSubject: $subject \n\nComments:\n $comments";
$headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;
mail($emailTo, $subject, $body, $headers);
$emailSent = true;
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Accessible PHP Contact Form with JQuery Validation</title>
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
// validate signup form on keyup and submit
var validator = $("#contactform").validate({
rules: {
contactname: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
subject: {
required: true,
minlength: 2
},
message: {
required: true,
minlength: 10
}
},
messages: {
contactname: {
required: "Please enter your name",
minlength: jQuery.format("Your name needs to be at least {0} characters")
},
email: {
required: "Please enter a valid email address",
minlength: "Please enter a valid email address"
},
subject: {
required: "You need to enter a subject!",
minlength: jQuery.format("Enter at least {0} characters")
},
message: {
required: "You need to enter a message!",
minlength: jQuery.format("Enter at least {0} characters")
}
},
// set this class to error-labels to indicate valid fields
success: function(label) {
label.addClass("checked");
}
});
});
</script>
</head>
<body>
<div class="wrapper">
<div id="contactWrapper" role="form">
<h1 role="heading">Send us a message</h1>
<?php if(isset($hasError)) { //If errors are found ?>
<p class="error">Please check if you've filled all the fields with valid information and try again. Thank you.</p>
<?php } ?>
<?php if(isset($emailSent) && $emailSent == true) { //If email is sent ?>
<div class="success">
<p><strong>Email Successfully Sent!</strong></p>
<p>Thank you for using our contact form <strong><?php echo $name;?></strong>! Your email was successfully sent and we 'll be in touch with you soon. </p>
</div>
<?php } ?>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="contactform">
<div class="stage clear">
<label for="name"><strong>Name: <em>*</em></strong></label>
<input type="text" name="contactname" id="contactname" value="" class="required" role="input" aria-required="true" />
</div>
<div class="stage clear">
<label for="email"><strong>Email: <em>*</em></strong></label>
<input type="text" name="email" id="email" value="" class="required email" role="input" aria-required="true" />
</div>
<div class="stage clear">
<label for="subject"><strong>Subject: <em>*</em></strong> </label>
<input type="text" name="subject" id="subject" value="" class="required" role="input" aria-required="true" />
</div>
<div class="stage clear">
<label for="message"><strong>Message: <em>*</em></strong> </label>
<textarea rows="8" name="message" id="message" class="required" role="textbox" aria-required="true"></textarea>
</div>
<p class="requiredNote"><em>*</em> Denotes a required field.</p>
<input type="submit" value="Send Message" name="submit" id="submitButton" title="Click here to submit your message!" />
</form>
</div>
</div>
</body>
</html>
带有JQuery验证的可访问PHP联系人表单
$（文档）.ready（函数（）{
//在键盘上验证注册表格并提交
var验证程序=$（“#contactform”）。验证({
规则：{
联系人姓名：{
要求：正确，
最小长度：2
},
电邮：{
要求：正确，
电子邮件：真的
},
主题：{
要求：正确，
最小长度：2
},
信息：{
要求：正确，
最小长度：10
}
},
信息：{
联系人姓名：{
必填：“请输入您的姓名”，
minlength:jQuery.format（“您的名称至少需要{0}个字符”）
},
电邮：{
必填：“请输入有效的电子邮件地址”，
minlength：“请输入有效的电子邮件地址”
},
主题：{
必填：“您需要输入一个主题！”，
minlength:jQuery.format（“输入至少{0}个字符”）
},
信息：{
必需：“您需要输入一条消息！”，
minlength:jQuery.format（“输入至少{0}个字符”）
}
},
//将此类设置为错误标签以指示有效字段
成功：功能（标签）{
label.addClass（“选中”）；
}
});
});
给我们发个信
请检查是否已用有效信息填写所有字段，然后重试。多谢各位
电子邮件已成功发送
感谢您使用我们的联系方式！您的电子邮件已成功发送，我们将很快与您联系
我认为有两个问题（如果我错了，请纠正我）。1） 验证不会触发，2）提交表单后，整个页面将刷新，对吗
对于1，您应该添加一个事件处理程序。我不确定你是否正确地实现了验证插件，如果是，我想你已经实现了。如果没有，并且出现javascript错误，表单将被发布到
，这就是页面刷新的原因。在页面的头部尝试以下操作（暂时去掉其他JavaScript）：
至于第2部分，如果您想使用div#content_区域
作为iframe，您需要更多的javascript。您最好的选择是通过AJAX发送表单（validate插件可能可以为您处理），然后将返回值重新插入div\content\u区域
。它看起来有点像这样：
<script>
$(function() {
$("#contactform").validate({ ... options ... });
});
</script>
$("#contactform").validate({
...,
submitHandler: function(form) {
$.ajax(form.prop("action"), {
data: form.serialize(),
type: "post",
always: function(response) {
$("#content_area").html(response);
}
});
}
});
为什么不使用iframe？谢谢你的回答，但我真的想避免使用iframe。谢谢你花时间帮助我，很抱歉我花了这么长时间才回复。我当时在照看孩子。现在，关于你的第一个问题——表单确实有效，它只是不在我想要的div和发送表单的as中；我相信它可以提交，但我还没有真正做到这一点，因为我想先解决这个小问题。我还实现了您提供的修复，但什么也没有发生。我这样做合乎逻辑吗？我不是最好的程序员，所以我可能会以这种方式做一些不可能的事情。首先尝试修复明显的错误（在开发控制台中查看）：uncaughttypeerror:objectfunction（e，t）{returnnewv.fn.init（e，t，n）}没有方法“format”
，它指向写有jQuery.format>的那一行(“您的姓名至少需要{0}个字符”）
。这可能应该是jQuery.validator.format（“您的姓名至少需要{0}个字符”）
Nice，您能将答案标记为已接受，或者如果您自己解决了问题，请将新答案与您的解决方案一起发布给其他用户，以供将来参考吗？谢谢！我还没有完全完成它。我正在处理一个大项目，所以我正在一步一步地做一点这一点和那一点。很抱歉回复太晚。
<script>
$(function() {
$("#contactform").validate({ ... options ... });
});
</script>
$("#contactform").validate({
...,
submitHandler: function(form) {
$.ajax(form.prop("action"), {
data: form.serialize(),
type: "post",
always: function(response) {
$("#content_area").html(response);
}
});
}
});