Form validation using jQuery plug in & PHP

Form validation using jQuery plug in & PHP


Posted in : PHP Posted on : January 11, 2011 at 6:30 PM Comments : [ 0 ]

This section contains the detail about the Form validation using jQuery plug in & PHP

Form validation using jQuery plug in & PHP

In this section, we will discuss about form validation using jQuery plug in & display of submit content using PHP. In the given below example a form is given ,whose fields  like name, email, url, content will be validate using jQuery plug in. After successful validation, the submitted content is displayed by the PHP page.

The given below example will give you a clear idea :

Example :

formValidation.php

<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Simple Form Validation</title>
<style type="text/css">
* { font-family: Verdana; font-size: 11px; line-height: 14px; }
.submit { margin-left: 125px; margin-top: 10px;}
.label { display: block; float: left; width: 120px; text-align: right;
margin-right: 5px; }
.form-row { padding: 5px 0; clear: both; width: 700px; }
label.error { width: 250px; display: block; float: left; color: red; 
padding-left: 10px; }
input[type=text], textarea { width: 250px; float: left; }
textarea { height: 50px; }
</style>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#form").validate({
rules: {
name: "required",// simple rule, converted to {required:true}
email: {// compound rule
required: true,
email: true
},
url: {
url: true
},
comment: {
required: true
}
},
messages: {
comment: "Please enter a comment."
}
});
});
</script>

</head>
<body>
<form id="form" method="post" action="formValidationMain.php">
<div class="form-row"><span class="label">Name *</span><input type="text" name="name"
id="namei"/></div>
<div class="form-row"><span class="label">E-Mail *</span>
<input type="text" name="email" id="emaili"/></div>
<div class="form-row"><span class="label">URL</span><input type="text" name="url" 
id="urli" /></div>
<div class="form-row"><span class="label">Your comment *</span><textarea name="comment"
id="commenti"></textarea></div>
<div class="form-row"><input class="submit" type="submit" value="Submit" name="submit" 
id="submiti"></div>
</form>
</body>
</html>

formValidationMain.php

<?php
$name=$_POST["name"];
$email=$_POST["email"];
$url=$_POST["url"];
$comment=$_POST["comment"];
?>
<h3><font color=red>YOUR COMMENT IS SUBMITTED SUCCESSFULLY!!</font></h3>
<b><font color=blue>
<?php
echo "NAME : ".$name;
?><br><?php
echo "EMAIL : ".$email;
?><br><?php
echo "URL : ".$url;
?><br><?php
echo "COMMENT : ".$comment;
?>
</font>

Output :

If you fill incorrect value or left blank, it will show you following message :

If you fill email in incorrect format, it will show you the following message :

If you fill all the information correctly, you will get the following details in a new PHP page :

Download Source Code

Go to Topic «PreviousHomeNext»

Your Comment:


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 

 
Tutorial Topics