I have a form that I use for people to contact me on my website. I have been using server-side php form validation which has been working as it should. I decided to implement java script client-side validation using the jquery validation plug in.
Ever since I added the client-side validation, I can no longer submit a form, nor will it display the php validation errors when i hit submit. As far as I'm concerned nothing should have changed.
I am still learning php, and would appriciate it if someone could lend a fresh eye to see if they can catch where I am going wrong here. Sorry for the long code, but I didn't want to leave something out that is needed. The url to see what is hapening is www.schuettcompsolutions.com/contact2 -Thanks in advance!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- *Credit* - Thanks to Kellan Stec for helping me with the PHP form-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Schuett Computer Solutions</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="scs, schuett computer solutions, dana schuett, computer repair, computer repair omaha, computer repair omaha ne, computer repair omaha nebraska, computer cons
ulting, computer consulting omaha, computer consulting omaha nebraska, computer solutions, computer solutions omaha, computer solutions omaha ne, computer solutions omaha nebraska, computer help, c
omputer help omaha, computer help omaha ne, computer help omaha nebraska " />
<meta name="description" content="Schuett Computer Soutions. Independent Computer Consulting." />
<link href="/scripts/style.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
jQuery.validator.addMethod("phoneUS", function(phone_number, element) {
phone_number = phone_number.replace(/\s+/g, "");
return this.optional(element) || phone_number.length > 9 &&
phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
}, "Please specify a valid phone number");
$("#form").validate();
});
</script>
<script type="text/javascript">
var RecaptchaOptions = {
theme : 'clean'
};
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-17454772-6']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<style type="text/css">
body { font-family: Arial; font-size: 12px; }
fieldset { border:0; }
label { display: block; width: 90px; float:left; clear:both; margin-top:10px; color:black;}
label em { display: block; float: right; padding-right:8px; color:red; }
label strong { display: block; float: left; padding-left:8px; color:red; }
textarea, input { float:left; width: 220; padding; 2px; }
textarea { height: 180px; width: 190px;}
#submit { margin-left: 333x; clear:both; width:100px; }
label.error { float: left; color: red; clear:none; width:190px; padding-left: 10px: font-size: 11px; }
.required_msg { margin-left: 5px; float:left; color: red; }
.captcha { padding-left: 0px; clear:both; float:left;}
</style>
</head>
<body>
<?php
require_once('recaptchalib.php');
$publickey = "6LeRpLsSAAAAAKdKEM4iandvEcS8xYAmPzQp5tav"; // you got this from the signup page
$privatekey = "6LeRpLsSAAAAAL3BNby7ra-NpLglcuyeDg1ox_a2";
$resp = recaptcha_check_answer ($privatekey,
$_SERVER["REMOTE_ADDR"],
$_POST["recaptcha_challenge_field"],
$_POST["recaptcha_response_field"]);
?>
<div id="wrapper">
<div id="nav">
<ul>
<li><a href="/">home</a></li>
<li><a href="/services">services</a></li>
<li><a href="/testimonials">testimonials</a></li>
<li><a href="/about">about</a></li>
<li class="lastchild"><a href="/contact"><font color="#FFFFFF">contact</a></li></font>
</ul>
</div><!-- end nav -->
<h2 id="currenttitle"><img src="/images/services.png" width="224" height="28" alt="Services" /></h2>
<div id="body">
<div id="current">
<img src="/images/logo.jpg" width="235" height="396" alt="logo" />
<div class="nav">
<ul>
<li>Wired & Wireless Networks</li>
<li>Data Backup & Recovery</li>
<li>Virus & Malware Removal</li>
<li>Hardware Replacement</li>
<li>Network & Internet Security</li>
<li>Custom PC Builds</li>
<li class="readmore"><a href="/services">More Services</a></li>
</ul>
</div><!-- end .nav -->
<div id="current2">
<div class="nav2">
<ul>
<li class="clean"><b>Contact Info</b></li>
<li><b>Dana Schuett</b></li>
<li><b>Phone:</b> 402.833.8000</li>
<li><b>E-mail: </b><a href="mailto:d.schuett@gmail.com">d.schuett@gmail.com</a></li>
</li>
</ul>
</div>
</div>
</div><!-- end current -->
<div id="content">
<h2><img src="/images/contact.gif" width="450" height="37" alt="Contact" /></h2>
<div class="contentform">
<?PHP
require_once "formvalidator.php";
$error_hash='no';
$show_form=true;
if(isset($_POST['Submit']))
{
$validator = new FormValidator();
$validator->addValidation("Name","req","<B>Please provide a Name</B>");
$validator->addValidation("Email","email","<B>The input for Email should be a valid Email address</B>");
$validator->addValidation("Email","req","<B>Please provide an Email</B>");
$validator->addValidation("Message","req","<B>Please provide a Message</B>");
if($validator->ValidateForm())
{
$show_form=false;
}
else
{
echo "<font color='#CC0000'><B> Validation Errors:</B></font>";
$error_hash = $validator->GetErrors();
foreach($error_hash as $inpname => $inp_err)
{
echo "<p/> $inpname : $inp_err</p>\n";
$show_form=true;
}
}
if($show_form===false)
{
if (!$resp->is_valid && $show_form===false)
{
$message = ' CAPTCHA - word verification was incorrect.<br /><br />';
$show_form=true;
}
else
{
$message = ' Thank you! Your message has been sent successfully.<br /><br />
You will be redirected to the home page in a few moments...<br /><br />';
// Grab the form vars
$Name=$_POST['Name'];
$Email=$_POST['Email'];
$Phone=$_POST['Phone'];
$Message=$_POST['Message'];
$mail_body = "Name: ".$_POST['Name']."\r\n";
$mail_body .= "Email: ".$_POST['Email']."\r\n";
$mail_body .= "Phone: ".$_POST['Phone']."\r\n";
$mail_body .= "Message: ".$_POST['Message']."\r\n";
$recipient = "d.schuett@gmail.com";
$subject = "Online SCS Contact";
$header = "From: ". $Name . " <" . $Email . ">\r\n"; //optional headerfields
mail($recipient, $subject, $mail_body, $header); //mail command
//page redirect to home
echo "<meta http-equiv=\"refresh\" content=\"7;url=";
echo "http://www.schuettcompsolutions.com\" />";
}
echo "<font color='#CC0000'><B>$message</B></font>";
}
}
if(true == $show_form)
{
?>
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td colspan="3" class="formhead"><hr width="100%"></hr><img src="/images/comp2.png" style="float:left; margin-left: 4px; margin-right: 5px;" />Have a question, computer problem, concern, or want to setup an appointment? Email me below!<br />
<hr width="100%"></hr></td>
</tr>
</table>
<form action="" method="POST" name="contactForm" id="form" accept-charset='UTF-8'>
<fieldset>
<label for="name">Name: <em>*</em></label>
<input type="text" name="Name" id="Name" class="required" value="<?php echo $_POST['Name'];?>">
<label for="email">Email: <em>*</em></label>
<input type="text" name="Email" id="Email" class="required email" value="<?php echo $_POST['Email'];?>">
<label for="phone">Phone: <em>*</em></label>
<input type="text" name="Phone" id="Phone" class="required phoneUS" value="<?php echo $_POST['Phone'];?>">
<label for="comments">Message:</label>
<textarea name="Message" id="Message" class="required"><?php echo $_POST['Message'];?></textarea>
</fieldset>
<p class="captcha"><?php echo recaptcha_get_html($publickey);?></p>
<label for="reg"><strong> *</strong> required fields</label>
<fieldset>
<input type="submit" name="submit" id="submit" value="Submit"> <input type="reset" value="Reset">
</fieldset>
</form>
<?PHP
}//true == $show_form
?>
</div><!-- end .contentbox -->
</div><!-- end content -->
<div class="clear"></div>
</div><!-- end body -->
<div id="footer" class="clear">
<div id="copyright">© 2010 Schuett Computer Solutions</div>
</div><!-- end footer -->
</div><!-- end wrapper -->
</body>
<div id="face-follow">
<a href="http://www.facebook.com/pages/Omaha-NE/Schuett-Computer-Solutions/144205642260624?ref=ts&__a=11" TARGET="_blank"><img src="/images/fbook.gif" alt="Add SCS on Facebook" /></a> </div>
<div id="remote-connect">
<a href="/tools/remote.exe"><img src="/images/remote2.gif" title="Click here when directed" alt="Remote Assistance" /></a>
</div>
</html>