jQuery – Form Validation Using jQuery Validate Plugin

Posted on Posted in Ajax, Jquery, PHP, Tutorial 5 Comments

Implemented a simple HTML5 Contact us form with the help of jQuery Validate plugin.

jQuery validate plugin validate the from when submit button is clicked.

If form fields are not empty then form is submitted successfully and you are redirected on thank you page.

This is the contact us form with jquery, ajax and php mail functionality.

Submit form without page reload
Submit form without page reload

Demo Code

Step 1 – HTML5 Form

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TechGuru | Contact Us</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
	<div id="container">        	
		<div id="content-panel">
        	<div id="right-pannel">
            	<div class="form-heading" align="center">Contact Us Form</div>
				<form class="form-box" action="send_mail.php" method="post" id="contact-form">
                	<div class="all-field">
                    	<input type="text" name="name" id="name" placeholder="Name">
                        <input type="text" name="phone" id="phone" placeholder="Contact no.">
                        <input type="text" name="email" id="email" placeholder="Email">
                        <textarea name="desc" id="desc"></textarea>
						<input name="submit" type="submit" value="Submit" class="button">                        
                  	</div>
               	</form>
     		</div>	
    	</div>    
 	</div>
</div>
</body>
</html>

Step 2 – CSS3

style.css

@charset "utf-8";
/* CSS Document */
html, body
{
	margin:0px;
	padding:0px;
	font-family:Arial;
	font-size:14px;
	/*color:#5d5454;
	background:#282828;*/
}	
#wrapper
{
	width:100%;
}
#container
{
	width:350px;
	margin:0px auto;
}	
#content-panel
{
	width:300px;
	float:left;
	padding:15px;
	/*background:#f3f5f4;*/
}	
#right-pannel
{
	width:274px;
	float:left;
	margin-left:26px;
}
.form-heading
{		
	width:266px;
	height:39px;
	float:left;
	color:#000;
	font-size:20px;
	font-weight:700;
	padding:12px 0 0px 17px;
}
.form-box
{
	width:266px;
	float:left;
	background: linear-gradient(to bottom, #efefef, #c7c7c7) repeat scroll 0 0 rgba(0, 0, 0, 0);
	background: -webkit-linear-gradient #efefef, #c7c7c7) repeat scroll 0 0 rgba(0, 0, 0, 0);
	box-shadow: 0 5px 4px -1px #000;
	border-radius:0 0 7px 7px;		
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#efefef', endColorstr='#c7c7c7')"; /* IE8 */
}	
.all-field
{
	width:274px;
	float:left;
	padding:15px 15px 15px 18px;
}
input
{
	border-radius:10px;
	height:25px;
	width:220px;
	padding:5px;
	margin-bottom:10px;
	background:#fff;
	color:#b3b3b3;
	border:1px solid #b3b3b3;
}
textarea
{
	width:220px;
	padding:5px;
	height:80px;
	border-radius:10px;
	border:1px solid #aaa;
}	
#content-box
{
	width:950px;
	float:left;
	color:#
}	
#content-box p.thanks
{
	text-align:left;
	color:#029e32;
	font-size:18px;
}	
label.error
{
	color: #ff0000;
	font-size: 12px;
	padding:0px 0 5px 0;
	float:left;
}	
.button{
	margin:14px 44px 0 0px;
	background:#000;
	height:31px;
	width:85px;
	cursor:pointer;
	border:none;
	float:right;
}

Step 3 – jQuery

script.js

//
//	jQuery Validate form script
//
$(document).ready(function(){  
	$('#contact-form').validate({
		rules: {
	      	name: {
	        	minlength: 4,
				maxlength: 20,
				required: true
	      	},
		  	phone: {
				required:true,
			  	digits: true,
			  	minlength: 10,
			  	maxlength: 15
	      	},
		  	email: {
				email:true,
	        	required: true
	      	},
		  	desc: {
				maxlength: 255
	      	}
	    },
		highlight: function(element) {
			$(element).closest('.control-group').removeClass('success').addClass('error');
		},
		beforesend: function(element) {
			element
			.closest('.control-group').removeClass('error').addClass('success');
			$("#progress").html("Saving....");
		},
		submitHandler: function(form) { // ajax goes here
			var $form = $('#contact-form'), 
            $result = $('#result');
            $form.ajaxForm({
            	target: $result
            }).submit();
        }
	});
});
Validation the from before submit.
Validate from before submit.

Step 4 – PHP Send Mail

send_mail.php

<?php
ini_set("date.timezone", "Asia/Calcutta");
$err_msg = '';
if(isset($_POST['submit'])) {
	$name = trim($_POST['name']);
	$email = trim($_POST['email']);
	$phone = trim($_POST['phone']);
	$desc = nl2br(trim($_POST['desc']));
	$time = date('Y-m-d h:i:s'); //2014-05-29 00:00:00
	$user_agent = $_SERVER['HTTP_USER_AGENT'];
	
	if($name=='' && $email=='' && $phone=='') {
		$err_msg = 'Please fill the form !';
	} else if($name=='') {
		$err_msg = 'Please specify name !';
	} else if($email=='') {
		$err_msg = 'Please specify email id !';
	} else if(!preg_match('/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/', $email)) {
		$err_msg = 'Please specify valid email id !';
	} else if($phone=='') {
		$err_msg = 'Please specify phone no. !';
	} 
	
	if($err_msg=='') {
		$emailto = "info@techgurulive.info";
		$header = 'MIME-Version: 1.0' . "\r\n";
		$header .= "Content-type: text/html; charset=iso-8859-1" . "\r\n";
		$header .= "From: $email" . "\r\n";
		//$header .= "Cc: admin@techgurulive.info" . "\r\n";
	
		$subject = "Query From ". $name ."";
		$message = "<html>
		<head>
			<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
			<title>Contact Us Mail</title>
		</head>
		<body>
			<table border='1' cellspacing='0' cellpadding='5' width='600'>
				<tr>
					<td width='320'><strong>Name</strong></td>
					<td width='280'>". $name ."</td>
				</tr>
				<tr>
					<td width='320'><strong>Phone</strong></td>
					<td width='280'>". $phone ."</td>
				</tr>
				<tr>
					<td width='320'><strong>Email Id</strong></td>
					<td width='280'>". $email ."</td>
				</tr>
				<tr>
					<td width='320'><strong>Query </strong></td>
					<td width='280'>".$desc."</td>
				</tr>
			</table>
		</body>
	</html>";
	
		if($result = mail($emailto, $subject, $message, $header)){			
			header('location:thanks.html');
		}else{
			header('location:index.html');
		}
	}	
}
?>

Step 5 – Success Page

thanks.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TechGuru | Contact Us</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div id="wrapper">
		<div id="container">
        	<div id="content-panel">
            	<div id="content-box">
                	<p class="thanks">Thank You</p>
                    <p>Thank you for submitting your details.<br> One of our dedicated team will be in contact with you shortly.</p>
                </div>
           	</div>    
       	</div>
    </div>
</body>
</html>
SHARE:

5 Comments on “jQuery – Form Validation Using jQuery Validate Plugin”

  2. Great blog you’ve got here.. It’s difficult to find good quality
    writing like yours these days. I seriously appreciate people like
    you! Take care!!

    Reply

  3. Hi, Neat post. There is an issue along with your site in internet explorer, may check this… IE nonetheless is the marketplace chief and a good component to other people will leave out your fantastic writing because of this problem.

    Reply

  4. I just want to mention I am very new to blogging and site-building and certainly savored this blog. Almost certainly I’m planning to bookmark your website . You absolutely have beneficial writings. Regards for sharing your web-site.

    Reply

  5. I simply want to say I’m beginner to blogging and actually enjoyed you’re web site. Likely I’m likely to bookmark your site . You surely come with fabulous article content. With thanks for sharing with us your web page.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

*