-1
[------嘿，夥計們感謝所有的幫助，但這個問題已經解決了------]Ajax表單提交和容器專區內驗證
如果我試圖是什麼幾乎不可能，請讓我知道傢伙。
好吧，所以我期望創建一個tabable窗體，並且選項卡必須動態地將鏈接路徑加載到指定的容器div中。現在這是很容易的部分。
好的，我有我的tabable導航和表單加載好，但是當我嘗試驗證這些表單時，他們從容器區域跳到一個全新的頁面。現在我想要的是將表單加載到指定的div中並在該div內進行驗證，並且當按下提交/發送按鈕時，我希望該表單能夠連接到PHP發送腳本，並且在成功提交後，我會想要在相同的指定div內顯示成功消息。所以基本上我想讓所有事情都像iframe被包含一樣。
請我求人幫我。我已經試了又試，但沒有任何工程：這是我的代碼：
HTML標記：
<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>
導航js腳本：
$('.menu_top').click(function() {
var href= $(this).attr('href');
$('#content_area').hide().load(href).slideDown('slow');
return false;
});
$(function() {
$('a').click(function(e) {
// you usually want to prevent default for handling link clicks,
// otherwise the browser follows the href (if that's intended skip this)
//e.preventDefault();
$('a').not(this).removeClass('Nav_Current');
$(this).addClass('Nav_Current');
});
});
這是我的表格：
<?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._%-][email protected][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 = '[email protected]'; //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>
爲什麼不使用iframe？ – Phortuin
感謝您的回答，但我真的想避免使用iframe。 – spencer