jQuery form Validation
What is jQuery :
1-jQuery is a fast and concise JavaScript Library created by John Resig in 2006 with a nice motto -
2-Write less, do more.
3-jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
Following feature of jQuery :
1-DOM manipulation − The jQuery made it easy to select DOM elements, traverse them and modifying their content by using cross-browser open source selector engine called Sizzle.
2-Event Handling : The jQuery offers an elegant way to capture a wide variety of events,such as click,over event,
3-Ajax Support :
jQuery support ajax technology,
4-Lightweight :he jQuery is very lightweight library - about 19KB in size ( Minified and gzipped ).
5-Animations − The jQuery comes with plenty of built-in animation effects.
6-Cross Browser Support − The jQuery has cross-browser support, and works well in IE and all.
Demo link :
http://freeteachnology.hol.es/jquery_validation/
Code :
Following is best example of form validation using jquery library, using jquery validation used following file :
1-jquery.validate.js,
2-jquery-3.1.1.js,
Now,simply feature file sturcture are dived into following ways :
create file structure :
1-home.php,
2-error.css,
3-js_signup.js,
4-action.php,
5-jquery.validate.js,
1-home.php
it file include cdn link of bootstrp css,js and validation,jquery-3.1.1,
Code :
<!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=utf-8" /><title>Jquery validation</title><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"><link href="error.css" rel="stylesheet"><script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><script src="jquery.validate.js"></script><script src="js_signup.js"></script>
</head>
in body section all html filed are there.
Home.php file include follwoing code :
Code :
<!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=utf-8" /><title>Jquery validation</title><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"><link href="error.css" rel="stylesheet"><script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><script src="jquery.validate.js"></script><script src="js_signup.js"></script></head><body><div class="container"><div class="alert alert-info"><strong>Hi..</strong> jQuery Form Validation.</div></div><div class="container text-center card"><div class="col-md-6"><form action="action.php" method="post" id="signupFrom" name="signupFrom" accept-charset="utf-8"><label for="name">First Name</label><input type="text" name="fname" id="fname" class="form-control" placeholder="Enter First Name..." /><div class="clearfix"></div><label for="name">Last Name</label><input type="text" name="lname" id="lname" class="form-control" placeholder="Enter Last Name..." /><div class="clearfix"></div><label for="contact">Mobile No</label><input type="text" name="mobile" id="mobile" class="form-control" placeholder="Enter your mobile no..." /><div class="clearfix"></div><label for="contact">DOB</label><input type="text" name="dob" id="dob" class="form-control" placeholder="Enter dob no..." /><div class="clearfix"></div><label for="contact">Pin code</label><input type="text" name="pincode" id="pincode" class="form-control" placeholder="Pin Code.." /><div class="clearfix"></div><label for="msg">Address</label><textarea name="address" id="address" cols="40" rows="10" class="form-control" rows="3" placeholder="Enter your Address..."></textarea><div class="clearfix"></div><label for="msg">Sex</label><select class="form-control" name="sex" id="sex"><option value="">--select--</option><option value="Male">Male</option><option value="Female">Female</option></select><div class="clearfix"></div></br><label for="msg">Nationality</label><div class="clearfix"></div><input type="radio" name="nationality" />Indian<input type="radio" name="nationality" />Other<div class="clearfix"></div><div for="nationality" generated="true" style="display:none" class="error"></div><label for="name">Email</label><input type="text" name="email" id="email" class="form-control" placeholder="Enter Email..." /><div class="clearfix"></div><label for="name">Username</label><input type="text" name="username" id="username" class="form-control" placeholder="Enter Username..." /><div class="clearfix"></div><label for="name">Password</label><input type="password" name="password" id="password" class="form-control" placeholder="Password" /><div class="clearfix"></div><label for="name">Confirm Password</label><input type="password" name="cpassword" id="cpassword" class="form-control" placeholder="Confirm Password" /><div class="clearfix"></div><label for="name">Profile Pic</label><input type="file" name="profile" id="profile" class="form-control" /><div class="clearfix"></div><input type="checkbox" id="warning" class="badgebox"> i agree term and condition<div class="clearfix"></div></br><button type="submit" name="submit" id="submit" class="btn btn-primary">Singup</button></form></div></div><link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"><br><!--Start:: if success ajax call then show message --><div id="demo"></div><!--End:: if success ajax call then show message --></body></html>
2-action.php
action.php file is validation is true then call action.php and print all submit data.
Code:
<?php/**Post value::-*/echo '<pre>';print_r($_POST);print_r($_FILES);die;
?>
3-error.css :
its include css tags thoese tags are used for error message.
4-js_signup.js:
using js validation library define validation rules of html field. Validation rules set validation message in following ways :
Code :
jQuery(document).ready(function () {$("#signupFrom").validate({rules: {fname: {required: true,},lname: {required: true,},mobile: {required: true,number:true,maxlength:10,minlength:10},dob:{required: true,},pincode: {required: true,number:true,maxlength:6,minlength:6},address: {required: true,},sex:{required: true,},nationality: {required: true,},email:{required: true,email:true},username:{required: true,},password:{required: true,maxlength:20,minlength:10},cpassword:{required: true,maxlength:20,minlength:10,equalTo:"#password"},profile: {required: true,accept: "jpg|jpeg|png",}},messages: {fname: {required: "* Please enter first name.",},lname: {required: "* Please enter last name.",},mobile: {required: "* Please enter mobile no.",number: "* Please enter only number.",minlength: "* Mobile no should be minimum 10 digit.",maxlength: "* Mobile no should be maximum 10 digit."},dob: {required: "* Please enter dob."},pincode: {required: "* Please enter Pincode.",number: "* Please enter only number.",minlength: "* Pincode should be minimum 6 digit.",maxlength: "* Pincode should be maximum 6 digit."},address: {required: "* Please enter address."},sex:{required: "* Please enter address."},nationality:{required: "* Please select nationality."},email:{required: "* Please enter email.",email:"* Enter email id is correct."},username:{required: "* Please enter username."},password:{required: "* Please enter password.",minlength: "* Password should be minimum 10 digit.",maxlength: "* Password should be maximum 20 digit."},cpassword:{required: "* Please enter password.",minlength: "* Password should be minimum 10 digit.",maxlength: "* Password should be maximum 20 digit.",equalTo:"* Enter password and confirm password are not match."},profile: {required: "* Please upload profile image.",accept: "* Please select jpg, jpeg, png file extension."}},});});
Above code if form validate can set then define form name and thoese form name set in validation :
Code:
$("#signupFrom").validate({ });
Comments