asked on

jquery validation script

I am 95% completed with basic mail form. The validation script is powered by a mixture of php and jquery. All in all it works fine. I am however having some issues confirming that the email address was entered correctly (IE re type your email).

Suggestions or pointers very welcome.
Thanks,
N

<?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 sure that the entered valu is the same as the entered email address
	if(trim($_POST['confirm_email']) == '')  {
		$hasError = true;
	} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['confirm_email']))) {
		$hasError = true;
	} else if (trim($_POST['confirm_email']) !== $email)  {
		$hasError = true;
	} else {
		$confirm_email = trim($_POST['confirm_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 = 'name@myemail.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 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
	<title></title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta name="robots" content="noindex, nofollow" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://www.beaconhilldesign.co.nz/jquery/form-validation/jquery.validate.pack.js" type="text/javascript"></script>
 
<script type="text/javascript"> 
$(document).ready(function(){
	$("#contactform").validate();
});
</script>
	
<style type="text/css"> 
body {
	font-family:Arial, Tahoma, sans-serif;
}
#contact-wrapper { 
	width:430px; 
	border:1px solid #e2e2e2; 
	background:#f1f1f1; 
	padding:20px;
}
#contact-wrapper div { 
	clear:both; 
	margin:1em 0;
}
#contact-wrapper label { 
	display:block; 
	float:none; 
	font-size:16px; 
	width:auto; 
}
form#contactform input { 
	border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7; 
	border-style:solid; 
	border-width:1px; 
	padding:5px; 
	font-size:16px; 
	color:#333; 
}
form#contactform textarea { 
	font-family:Arial, Tahoma, Helvetica, sans-serif; 
	font-size:100%; 
	padding:0.6em 0.5em 0.7em; 
	border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7; 
	border-style:solid; 
	border-width:1px;
}
</style>
</head>
 
<body>
	<div id="contact-wrapper">
	
		<?php if ($emailSent == true) {
		echo"	<p><strong>Email Successfully Sent!</strong></p>
		<p>Thank you <strong>".$name."</strong> for using my contact form! Your email was successfully sent and I will be in touch with you soon.</p>";
		}else{
			echo"<p>Contact Us</p>";
			}
		?>
		
	<form method="post" action="index.php" id="contactform">					
		<div>
		    <label for="name"><strong>Name:</strong></label> 
			<input type="text" size="50" name="contactname" id="contactname" value="" class="required" />
		</div>
		
		<div>
			<label for="email"><strong>Email:</strong></label> 
			<input type="text" size="50" name="email" id="email" value="" class="required email" />
		</div>
        
        	<div>
			<label for="confirm_email"><strong>Confirm Email:</strong></label> 
			<input type="text" size="50" name="confirm_email" id="confirm_email" value="" class="confirm email" />
		</div>
		
		<div>
			<label for="subject"><strong>Subject:</strong></label> 
			<input type="text" size="50" name="subject" id="subject" value="" class="required" />
		</div>
							
		<div>
			<label for="message"><strong>Message:</strong></label>
			<textarea rows="5" cols="50" name="message" id="message" class="required"></textarea>
		</div>
	    <input type="submit" value="Send Message" name="submit" />
	</form>
	</div>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

saifikram_md

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Robert Granlund

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Neil_Bradley

ASKER

Ok saifikram_md. I found you link usefull.

using the link you sent me I have setup the same form however I am still drawing a blank when it comes to validating that my second email address is matches the first.

New form shown in my code snippet..

<?php
if(isset($_POST['submit'])) {
$value = test;
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>
  <script>
  $(document).ready(function(){
    $("#commentForm").validate();
  });
  </script>
  
</head>
<body>
  
<?php echo $value; ?>
 <form class="cmxform" id="commentForm" method="post" action="">
<fieldset>
   <legend>A simple comment form with submit validation and default messages</legend>
   <p>
     <label for="cname">Name</label>
     <em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />
   </p>
   <p>
     <label for="cemail">E-Mail</label>
     <em>*</em><input id="cemail" name="email" size="25"  class="required email" />
   </p>
    <p>
     <label for="cemail">Re enter Email:</label>
     <em>*</em><input id="cemail" name="email" size="25"  class="required email" />
   </p>
   <p>
     <label for="ccomment">Your comment</label>
     <em>*</em><textarea id="ccomment" name="comment" cols="22"  class="required"></textarea>
   </p>
   <p>
     <input name="submit" type="submit" class="submit" id="submit" value="Submit"/>
   </p>
 </fieldset>
 </form>
</body>
</html>

Open in new window

Robert Granlund

The two email inputs need to have unique names that match the names in the validation process.
Does this help?

<label for="cemail">E-Mail</label>
     <em>*</em><input id="cemail" name="email1" size="25"  class="required email" />
   </p>
    <p>
     <label for="cemail">Re enter Email:</label>
     <em>*</em><input id="cemail" name="email2" size="25"  class="required email" />
   </p>

Open in new window

Neil_Bradley

ASKER

Solved.
I used the link you sent me saifikram_md however modification was required to achieve what I wanted.
I had to use "rules" to make my script validate another form field entry..
I have added the full working code as a snippet so others who need a similar function can see how it works.
Cheers,
N

PS: rgranlund thanks for the PHP code. It didnt answer my quetion however id did help get me there..

<?php
if(isset($_POST['submit'])) {
$value = test;
}
?>
<!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=ISO-8859-1" />
<title>jQuery validation plug-in - main demo</title>

<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />

<script src="../lib/jquery.js" type="text/javascript"></script>
<script src="../jquery.validate.js" type="text/javascript"></script>

<script type="text/javascript">

$().ready(function() {

	// validate signup form on keyup and submit
	$("#signupForm").validate({
		rules: {
			firstname: "required",
			lastname: "required",
			
			email: {
				required: true,
				email: true
			},
			confirm_email: {
				required: "true",
				equalTo: "#email"
			},

		},
		messages: {
			firstname: "Please enter your firstname",
			lastname: "Please enter your lastname",
		
			confirm_email: {
				required: "Please confirm email ",
				equalTo: "Please check your email address"
			},
		
		}
	});
	
});
</script>

<style type="text/css">
#commentForm { width: 500px; }
#commentForm label { width: 250px; }
#commentForm label.error, #commentForm input.submit { margin-left: 253px; }
#signupForm { width: 670px; }
#signupForm label.error {
	margin-left: 10px;
	width: auto;
	display: inline;
}
#newsletter_topics label.error {
	display: none;
	margin-left: 103px;
}
</style>

</head>
<body>

<h1 id="banner"><?php echo $value;?></h1>
<div id="main">
  <form action="validate.php" method="post" name="signupForm" class="cmxform" id="signupForm">
<fieldset>
		<legend>Validating a complete form</legend>
		<p>
			<label for="firstname">Firstname</label>
			<input id="firstname" name="firstname" />
		</p>
		<p>
			<label for="lastname">Lastname</label>
			<input id="lastname" name="lastname" />
		</p>
		<p>
			<label for="email">Email</label>
			<input id="email" name="email" />
		</p>
			<p>
			<label for="email">Confirm Email</label>
			<input id="confirm_email" name="confirm_email" />
	</p>
            <p>
			<input name="submit" type="submit" class="submit" id="submit" value="Submit"/>
		</p>
	</fieldset>
</form>

</div>

</body>
</html>

Open in new window

SOLUTION

hielo

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Neil_Bradley

ASKER

Thanks for all of your comments and input. No one answer solved the problem however they all lead me to the solution.
Thanks,
N