JQuery Form validation example 1
From w3cyberlearnings
Contents |
What is form validation in jQUery
There are many ways you can validate form input from end-users. Using jQuery form validation is completely fast and easy, you will not need to write lengthy code as you do using javascript. Here you will learn how to validate form in jquery.
requirement jquery library
- You need to include two jquery libraries: jquery.min.js and jquery.validate.js
<script
type="text/javascript"
src="jquery.min.js">
</script>
<script
type="text/javascript"
src="jquery.validate.js">
</script>
css style sheet
- You need to define some css style sheet for generate error message to the user when the user input is invalid.
<style>
.error {
border: 1px solid red;
color:red;
}
</style>
HTML form
<form name="frm_user_infor" id="frm_user_infor" method="post">
<span class="title">Process Check Out</span>
<table cellspacing="8">
<tr>
<td></td>
<td>Billing Address</td>
</tr>
<tr>
<td>Street</td>
<td><input type="text" name="street" size="10" maxlength="15"/></td>
</tr>
<tr>
<td>City</td>
<td><input type="text" name="city" size="10" maxlength="10"/></td>
</tr>
<tr>
<td>Zip Code</td>
<td><input type="text" name="zip" size="10" maxlength="10"/></td>
</tr>
<tr>
<td>State</td>
<td><input type="text" name="state" size="10" maxlength="15"/></td>
</tr>
<tr>
<td></td>
<td>Card Information</td>
</tr>
<tr>
<td>Name on Card</td>
<td><input type="text" name="card_user" size="30" maxlength="30"/></td>
</tr>
<tr>
<td>Card Number</td>
<td><input type="text" name="card_number" size="14" maxlength="17"/></td>
</tr>
<tr>
<td>Security Code</td>
<td><input type="text" name="card_secret" size="4" maxlength="4"/></td>
</tr>
<tr>
<td>Expiration</td>
<td>Month<input type="text" name="card_month" size="2" maxlength="2"/>
Year<input type="text" name="card_year" size="2" maxlength="2"/></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="process" value="Place Order"/></td>
</tr>
</table>
</form>
jquery validate syntax
$(form).validate({
rules: {
// validate rule place here
},
message: {
// validate message when error place here
}
submitHandler:function(form){
// send the valid form element to ajax
}
});
jquery validate
<script type="text/javascript">
$(document).ready(function(){
$('form[name="frm_user_infor"]').validate({
rules: {
street: {required:true, minlength:5, maxlength:10},
city: {required:true,minlength:2, maxlength:10},
zip: {required:true,minlength:5, maxlength:12},
state: {required:true,minlength:2, maxlength:10},
card_user:{required:true,minlength:2, maxlength:15},
card_number: {required:true,minlength:14, maxlength:16},
card_secret: {required:true,minlength:3},
card_month: {required:true,minlength:2},
card_year: {required:true,minlength:2}
},
message: {
street: {
required: 'Street can not be empty.',
minlength: 'Street is too short',
maxlength: 'Street is too long'
},
city: {
required: 'City can not be empty.',
minlength: 'City is too short',
maxlength: 'City is too long'
},
zip: {
required: 'Zip code can not be empty.',
minlength: 'zip is too short',
maxlength: 'zip is too long'
},
state: {
required: 'State can not be empty.',
minlength: 'State is too short',
maxlength: 'State is too long'
},
card_user: {
required: 'User name can not be empty.',
minlength: 'User name is too short',
maxlength: 'User name is too long'
},
card_number: {
required: 'Card number can not be empty.',
minlength: 'Card number is too short',
maxlength: 'Card number is too long'
},
card_secret: {
required: 'Card secret code can not be empty.',
minlength: 'Card secret code number is too short'
},
card_month: {
required: 'Card expiration month can not be empty.',
minlength: 'Card expiration month is too short'
},
card_year: {
required: 'Card expiration year can not be empty.',
minlength: 'Card expiration year is too short'
}
},
submitHandler:function(form){
if(confirm("Are you sure you want to submit this course?"))
{
var URL='/eshop/lib/transactioncentral.php';
var street = $('input[name="street"]').val();
var city = $('input[name="city"]').val();
var zip = $('input[name="zip"]').val();
var state = $('input[name="state"]').val();
var c_name = $('input[name="card_user"]').val();
var c_number = $('input[name="card_number"]').val();
var c_secret = $('input[name="card_secret"]').val();
var c_month = $('input[name="card_month"]').val();
var c_year = $('input[name="card_year"]').val();
var amount = $('input[name="Amount"]').val();
var dataf = 'action=send&street='+street+'&city='+city+'&zip='+zip
+ '&state='+state + '&c_name='+c_name
+ '&c_number=' + c_number + '&c_secret='+ c_secret
+ '&c_month=' + c_month + '&c_year='+ c_year +'&amount='+amount;
$.ajax({
url: URL,
type: 'POST',
data:dataf,
success:function(data){
alert('data');
}
});
}
else {
alert('bad');
//form.submit();
}
return false;
}
});
});
</script>
A complete form validation code TRY-IT
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script
type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script
type="text/javascript"
src="/src/dev/jquery.validate.js">
</script>
<style>
.error {
border: 1px solid red;
color:red;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('form[name="frm_user_infor"]').validate({
rules: {
street: {required:true, minlength:5, maxlength:10},
city: {required:true,minlength:2, maxlength:10},
zip: {required:true,minlength:5, maxlength:12},
state: {required:true,minlength:2, maxlength:10},
card_user:{required:true,minlength:2, maxlength:15},
card_number: {required:true,minlength:14, maxlength:16},
card_secret: {required:true,minlength:3},
card_month: {required:true,minlength:2},
card_year: {required:true,minlength:2}
},
message: {
street: {
required: 'Street can not be empty.',
minlength: 'Street is too short',
maxlength: 'Street is too long'
},
city: {
required: 'City can not be empty.',
minlength: 'City is too short',
maxlength: 'City is too long'
},
zip: {
required: 'Zip code can not be empty.',
minlength: 'zip is too short',
maxlength: 'zip is too long'
},
state: {
required: 'State can not be empty.',
minlength: 'State is too short',
maxlength: 'State is too long'
},
card_user: {
required: 'User name can not be empty.',
minlength: 'User name is too short',
maxlength: 'User name is too long'
},
card_number: {
required: 'Card number can not be empty.',
minlength: 'Card number is too short',
maxlength: 'Card number is too long'
},
card_secret: {
required: 'Card secret code can not be empty.',
minlength: 'Card secret code number is too short'
},
card_month: {
required: 'Card expiration month can not be empty.',
minlength: 'Card expiration month is too short'
},
card_year: {
required: 'Card expiration year can not be empty.',
minlength: 'Card expiration year is too short'
}
},
submitHandler:function(form){
if(confirm("Are you sure you want to submit this course?"))
{
var URL='/eshop/lib/transactioncentral.php';
var street = $('input[name="street"]').val();
var city = $('input[name="city"]').val();
var zip = $('input[name="zip"]').val();
var state = $('input[name="state"]').val();
var c_name = $('input[name="card_user"]').val();
var c_number = $('input[name="card_number"]').val();
var c_secret = $('input[name="card_secret"]').val();
var c_month = $('input[name="card_month"]').val();
var c_year = $('input[name="card_year"]').val();
var amount = $('input[name="Amount"]').val();
var dataf = 'action=send&street='+street+'&city='+city+'&zip='+zip
+ '&state='+state + '&c_name='+c_name
+ '&c_number=' + c_number + '&c_secret='+ c_secret
+ '&c_month=' + c_month + '&c_year='+ c_year +'&amount='+amount;
$.ajax({
url: URL,
type: 'POST',
data:dataf,
success:function(data){
alert('data');
}
});
}
else {
alert('bad');
//form.submit();
}
return false;
}
});
});
</script>
</head>
<body>
<form name="frm_user_infor" id="frm_user_infor" method="post">
<span class="title">Process Check Out</span>
<table cellspacing="8">
<tr>
<td></td>
<td>Billing Address</td>
</tr>
<tr>
<td>Street</td>
<td><input type="text" name="street" size="10" maxlength="15"/></td>
</tr>
<tr>
<td>City</td>
<td><input type="text" name="city" size="10" maxlength="10"/></td>
</tr>
<tr>
<td>Zip Code</td>
<td><input type="text" name="zip" size="10" maxlength="10"/></td>
</tr>
<tr>
<td>State</td>
<td><input type="text" name="state" size="10" maxlength="15"/></td>
</tr>
<tr>
<td></td>
<td>Card Information</td>
</tr>
<tr>
<td>Name on Card</td>
<td><input type="text" name="card_user" size="30" maxlength="30"/></td>
</tr>
<tr>
<td>Card Number</td>
<td><input type="text" name="card_number" size="14" maxlength="17"/></td>
</tr>
<tr>
<td>Security Code</td>
<td><input type="text" name="card_secret" size="4" maxlength="4"/></td>
</tr>
<tr>
<td>Expiration</td>
<td>Month<input type="text" name="card_month" size="2" maxlength="2"/>
Year<input type="text" name="card_year" size="2" maxlength="2"/></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="process" value="Place Order"/></td>
</tr>
</table>
</form>
</body>
</html>
Demo
Related Links
Jquery and HTML Elements
