Solved

jquery validation script

Posted on 2010-11-20
7
789 Views
Last Modified: 2012-05-10
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

0
Comment
Question by:Neil_Bradley
7 Comments
 
LVL 3

Accepted Solution

by:
saifikram_md earned 200 total points
ID: 34181095
JQueryvalidation plugin would be a better option. see the link below:-

http://docs.jquery.com/Plugins/validation
0
 
LVL 7

Assisted Solution

by:rgranlund
rgranlund earned 150 total points
ID: 34181189
This is the code I use:  You modify it to suit your needs:

if (preg_match ('/^[\w.-]+@[\w.-]+\.[A-Za-z]{2,6}$/', $trimmed['email'])) {
		if ($trimmed['email1'] == $trimmed['email2']) {
			$e = mysqli_real_escape_string ($dbc, $trimmed['email1']);
		} else {
			echo '<p class="error">Your email did not match the confirmed email!</p>';
		}
	} else {
		echo '<p class="error">Please enter a valid email!</p>';
	}

<form>
<b>email:</b> <input type="email" name="email1" size="20" maxlength="20" />
	
<b>ConfirmEmail:</b> <input type="email" name="email2" />
</form>

Open in new window

0
 
LVL 5

Author Comment

by:Neil_Bradley
ID: 34181221
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

0
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 7

Expert Comment

by:rgranlund
ID: 34181340
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

0
 
LVL 5

Author Comment

by:Neil_Bradley
ID: 34181347
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

0
 
LVL 82

Assisted Solution

by:hielo
hielo earned 150 total points
ID: 34184179
On your ORIGINAL post, since you are already making sure that $_POST['email'] has a valid email format, then you did NOT need these:
//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']);
	}

since you are simply setting $hasError to true or false. You would need that if you were giving specific error messages as to what error actually ocurred! So, in your case you have just gotten rid of the lines I outlined above and the in you else clause if your email check you could have used:

else {
		$email = trim($_POST['email']);
                $hasError = ( $email==trim($_POST['confirm_email']) );
	}

Open in new window

0
 
LVL 5

Author Closing Comment

by:Neil_Bradley
ID: 34184222
Thanks for all of your comments and input. No one answer solved the problem however they all lead me to the solution.
Thanks,
N
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now