Home Tutorials Php 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>