jQuery Form Validation Example

Jquery

jQuery Form Validation Example:

We used to validate the form using javascript and there we have to write our own logics to validate the email, phone number and mandatory fields etc….

But now jquery validate plugin is available for ease of form validations.

Include the below scripts:
[plain]
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
[/plain]

Form need to be validated:
[html]
<form method="post" action="signup.php?retrun=http://www.gururecharge.chudar.com/terms.php" id="validate_form" name="validate_form">
<div class="divmain" style=" float:left; margin-left:45px; border-right:thin ridge; padding-right:30px; ">
<div style="border-bottom:#CCC solid 1px;"></div>
<br />
<div class="divbox1">
<div class="divbox11">
<div style="padding:12px 0px 6px 0px;">Enter your full name</div>
<input type="text" name="usr_name" id="usr_name">
<div id="disp3"></div>
<div style="padding-bottom:6px;">Enter your Mobile Number</div>
<div class="countryCode">
<input type="text" name="mobileno" id="mobileno" maxlength="10">
<span style="color:#F00;display:none;" id="rvEVMN">Please insert Valid Mobile no</span>
</div>
<div id="disp"></div>
<div style="padding:12px 0px 6px 0px;">Enter your Email ID</div>
<input type="text" name="email" id="email">
<div id="disp1"></div>
<div style="padding:12px 0px 6px 0px;">Create your Password</div>
<input type="password" name="password" id="password">
<div style="clear:both;"></div>
<div align="right" style="padding-right:90px; padding-top:10px; padding-bottom:10px;">
</div>
<div class="btn-spinner" alt="Proceed to Recharge"><div class="spinner hidden"></div>
<input type="submit" class="btn proceed active" data-express-text="Recharge Now" data-soft-block-text="Proceed anyway" data-default-text="Proceed" name="Proceed" value="Create Account" alt="Proceed to Recharge" ></div>
</div>
</div>
<div style="clear:both;"></div>
</div>
</form>
[/html]

Script to validate the form:

[html]
<script>
$(function() {
// form name
$("#validate_form").validate({
rules: {
mobileno:
{
required: true,
number: true,
minlength: 10,
maxlength:10,
},
email: {
required: true,
email: true,
},
password:
{
required: true,
minlength: 6,
},
usr_name:
{
required: true,
},
},
// Specify the validation error messages
messages: {
mobileno: "Mobile no is mandatory",
email: "Email is mandatory",
password: "Password is mandatory",
usr_name: "Name is mandatory",
},
submitHandler: function(form) {
if($("#mobileno").val() > 0) { form.submit(); } else {
document.getElementById(‘rvEVMN’).style.display=’inline’; return false;
}
}
});
});
</script>
[/html]

Complete source code:

[html]
<html>
<head>
<title>
jQuery Form validation Example
</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script>
$(function() {
// form name
$("#validate_form").validate({
rules: {
mobileno:
{
required: true,
number: true,
minlength: 10,
maxlength:10,
},
email: {
required: true,
email: true,
},
password:
{
required: true,
minlength: 6,
},
usr_name:
{
required: true,
},
},
// Specify the validation error messages
messages: {
mobileno: "Mobile no is mandatory",
email: "Email is mandatory",
password: "Password is mandatory",
usr_name: "Name is mandatory",
},
submitHandler: function(form) {
if($("#mobileno").val() > 0) { form.submit(); } else {
document.getElementById(‘rvEVMN’).style.display=’inline’; return false;
}
}
});
});
</script>
<form method="post" action="signup.php?retrun=http://www.gururecharge.chudar.com/terms.php" id="validate_form" name="validate_form">
<div class="divmain" style=" float:left; margin-left:45px; border-right:thin ridge; padding-right:30px; ">
<div style="border-bottom:#CCC solid 1px;"></div>
<br />
<div class="divbox1">
<div class="divbox11">
<div style="padding:12px 0px 6px 0px;">Enter your full name</div>
<input type="text" name="usr_name" id="usr_name">
<div id="disp3"></div>
<div style="padding-bottom:6px;">Enter your Mobile Number</div>
<div class="countryCode">
<input type="text" name="mobileno" id="mobileno" maxlength="10">
<span style="color:#F00;display:none;" id="rvEVMN">Please insert Valid Mobile no</span>
</div>
<div id="disp"></div>
<div style="padding:12px 0px 6px 0px;">Enter your Email ID</div>
<input type="text" name="email" id="email">
<div id="disp1"></div>
<div style="padding:12px 0px 6px 0px;">Create your Password</div>
<input type="password" name="password" id="password">
<div style="clear:both;"></div>
<div align="right" style="padding-right:90px; padding-top:10px; padding-bottom:10px;">
</div>
<div class="btn-spinner" alt="Proceed to Recharge"><div class="spinner hidden"></div>
<input type="submit" class="btn proceed active" data-express-text="Recharge Now" data-soft-block-text="Proceed anyway" data-default-text="Proceed" name="Proceed" value="Create Account" alt="Proceed to Recharge" ></div>
</div>
</div>
<div style="clear:both;"></div>
</div>
</form>
</body>
</html>
[/html]

This will work this way,
Form to validate using jQuery

And validation worked this way,
validated form

Download Source code:

jQuery Form Validation Example

Recommended jQuery Books:

Leave a comment

Leave a Reply