Validation with Jquery Form Plugin
This is the first time I have attempted to make a form using jquery and php. I used the folks over at Mid Mo Design as an example but even with that tutorial am still having trouble getting it to do what I want. This is the code I have been using. As well as jquery 1.4.1 and jQuery Form Plugin 2.43. Any help would be greatly appreciated.
css
#scrollContact {
border-top: double 1px #0D0D0D;
padding: 100px 50px 50px 50px;
background: #020303;
position: relative;
overflow: hidden;
width: 924px;
text-align: justify;
}
.contactInfo {
float:left;
width: 214px;
margin-right: 10px;
margin-top: 5px;
}
#contactForm {
float: left;
width: 700px;
}
#contactForm span {
float: left;
margin:5px;
width: 455px;
}
input, textarea {
-moz-border-radius:5px 5px 5px 5px;
border:1px solid #001932;
color:#BBBBBB;
font:1.1em Verdana,Geneva,sans-serif;
background: #0A0A0A;
}
input:hover, textarea:hover {
border:1px solid #0278f2;
background: #242424;
}
#contactForm span input {
line-height:1.8em;
width:430px;
padding:11px 10px;
margin: 0px 0px 10px 0px;
}
#contactForm input {
line-height:1.8em;
width:200px;
padding:11px 10px;
margin: 5px;
}
#contactForm textarea {
height:190px;
line-height:1.8em;
width:430px;
padding:10px;
}
.message {
background:#eee;
color:#000;
display:none;
padding:10px;
height: 70px;
position: absolute;
bottom:0px;
}
Html
<div id="scrollContact" name="scrollContact">
<div class="title">
<h2 class="titleContact">Contact</h2>
<ul class="pagenav">
<li class="pagenavTitle">Navigate To:</li>
<li class="pagenavWork"><a title="work" href="#scrollWork">Work</a></li>
<li class="pagenavServices"><a title="services" href="#scrollServices">services</a></li>
<li class="pagenavAbout"><a title="about" href="#scrollAbout">about</a>&l开发者_StackOverflow中文版t;/li>
<li class="pagenavContact"><a title="contact" href="#scrollContact">contact</a></li>
</ul>
</div>
<div class="contactInfo">
<strong>Get A Free Quote</strong><br />
Thank you for your interest in contacting me. Please use the form to the right to contact me via email. I will respond to your inquiry as soon as possible. Please note all fields are required. <br />
<strong>What Next?</strong> <br />
Thank you for your interest in contacting me. Please use the form to the right to contact me via email. I will respond to your inquiry as soon as possible. Please note all fields are required.
</div>
<form action="bin/sendmail.php" method="post" id="contactForm">
<span>
<input type="text" name="contactTitle" value="" id="contactTitle" title="Subject" />
<textarea rows="5" name="contactMessage">Your Message</textarea>
</span>
<input type="text" name="contactName" value="" id="contactName" title="Your Name"/>
<input type="text" name="contactEmail" value="" id="contactEmail" title="Your Email" />
<input class="contactButton" type="submit" name="submit" title="Submit Form" />
</form>
<div class="message"><div id="alert"></div></div>
</div>
Php
<?php
$sendto = 'my@email.com';
$subject = 'Contact from contact form';
$errormessage = 'Oops! There seems to have been a problem. May we suggest...';
$thanks = "Thanks for the email! We'll get back to you as soon as possible!";
$honeypot = "You filled in the honeypot! If you're human, try again!";
$emptyname = 'Entering your name?';
$emptyemail = 'Entering your email address?';
$emptytitle = 'Entering The Subject?';
$emptymessage = 'Entering a message?';
$alertname = 'Entering your name using only the standard alphabet?';
$alertemail = 'Entering your email in this format: <i>name@example.com</i>?';
$alerttitle = 'Entering the subject using only the standard alphabet?';
$alertmessage = "Making sure you aren't using any parenthesis or other escaping characters in the message? Most URLS are fine though!";
$alert = '';
$pass = 0;
function clean_var($variable) {
$variable = strip_tags(stripslashes(trim(rtrim($variable))));
return $variable;
}
if ( empty($_REQUEST['last']) ) {
if ( empty($_REQUEST['contactName']) ) {
$pass = 1;
$alert .= "<li>" . $emptyname . "</li>";
} elseif ( ereg( "[][{}()*+?.\\^$|]", $_REQUEST['contactName'] ) ) {
$pass = 1;
$alert .= "<li>" . $alertname . "</li>";
}
if ( empty($_REQUEST['contactEmail']) ) {
$pass = 1;
$alert .= "<li>" . $emptyemail . "</li>";
} elseif ( !eregi("^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,3})$", $_REQUEST['contactEmail']) ) {
$pass = 1;
$alert .= "<li>" . $alertemail . "</li>";
}
if ( empty($_REQUEST['contactTitle']) ) {
$pass = 1;
$alert .= "<li>" . $emptytitle . "</li>";
} elseif ( ereg( "[][{}()*+?.\\^$|]", $_REQUEST['contactTitle'] ) ) {
$pass = 1;
$alert .= "<li>" . $alerttitle . "</li>";
}
if ( empty($_REQUEST['contactMessage']) ) {
$pass = 1;
$alert .= "<li>" . $emptymessage . "</li>";
} elseif ( ereg( "[][{}()*+?\\^$|]", $_REQUEST['contactMessage'] ) ) {
$pass = 1;
$alert .= "<li>" . $alertmessage . "</li>";
}
if ( $pass==1 ) {
echo "<script>$(\".message\").hide(\"slow\").show(\"slow\"); </script>";
echo "<b>" . $errormessage . "</b>";
echo "<ul>";
echo $alert;
echo "</ul>";
} elseif (isset($_REQUEST['message'])) {
$message = "From: " . clean_var($_REQUEST['contactName']) . "\n";
$message .= "Email: " . clean_var($_REQUEST['contactEmail']) . "\n";
$message .= "Telephone: " . clean_var($_REQUEST['contactTitle']) . "\n";
$message .= "Message: \n" . clean_var($_REQUEST['contactMessage']);
$header = 'From:'. clean_var($_REQUEST['contactEmail']);
mail($sendto, $subject, $message, $header);
echo "<script>$(\".message\").hide(\"slow\").show(\"slow\").animate({opacity: 1.0}, 4000).hide(\"slow\"); $(':input').clearForm() </script>";
echo $thanks;
die();
}
} else {
echo "<script>$(\".message\").hide(\"slow\").show(\"slow\"); </script>";
echo $honeypot;
}
?>
here is a very very very good article for you. It will help you much.
精彩评论