I have developed simple php based form validation example to demonstrate the jQuery based fom validation.
please set up the following files in your WAMP/LAMP/XAMP server.
index.php
validation.js
requestHandler.php
please set up the following files in your WAMP/LAMP/XAMP server.
index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <!--since we are using jquery, the jquery fram,eworkj should be inherited--> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <!--jquery.validate.js file should be included because we are going to validate the form fileds based on the jquery validation framework --> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script> <!--Validation.js is the centralized javascript file where the all javaScript and Jquery functions have been implemented--> <script type="text/javascript" src="validation.js"></script> <title>Chathuranga Tennakoon</title> </head> <body> <form id="sample_form" name="sample_form" method="post" action=""> First name <input id="first_name" name="first_name" type="text"/><br/> Age <input id="age" name="age" type="text"/><br/> Email <input id="email" name="email" type="text"/><br/> <input type="submit" name="submit" id="submit" onclick="validateAndSubmit()" /> </form> <div id="submitHandlingMessage"> </div> </body> </html>
validation.js
/*
Author:Chathuranga Tennakoon
Email: chathuranga.t@gmail.com
Web : http://chathurangat.blogspot.com
*/
function validateAndSubmit(){
$().ready(function() {
$("#sample_form").validate
({
rules:
{
first_name: "required",
age:{
required:true,
number:true
},
email: {
required: true,
email: true
}
},
messages:
{
first_name: "First Name is required",
age: {
required:"Age is required",
number:"Age is invalid"
},
email:{
required:"Email is required",
email:"Please neter valid email"
}
},
submitHandler: function(form) {
//submit handler function will invoke if al the data fields are validated properly
$.post('requestHandler.php', $("#sample_form").serialize(), function(msg) {
$('#submitHandlingMessage').html(msg);
});
}
});
});
}//validateAndSubmit
requestHandler.php
<?php /* Author:Chathuranga Tennakoon Email: chathuranga.t@gmail.com Web : http://chathurangat.blogspot.com */ $message = "Submitted Data as follows"; $message = $message." Name ".$_POST["first_name"]."<br/>"; $message = $message." Age ".$_POST["age"]."<br/>"; $message = $message." Email ".$_POST["email"]."<br/>"; echo $message; ?>
No comments:
Post a Comment