Description:
Validation in registration forms is extremely important
in our web development.
Jquery
is the best way to validate forms.
There are lot of validation plugins are available to
validate forms.
I am going to explain about validation engine plugin.
It is a powerful validation plugin where we can
validation all type of validations with simple way.
Steps:
1. Download
Validation Engine Plugin
You can download
plugin from https://github.com/posabsolute/jQuery-Validation-Engine or
2. Extract it and
Include the files jquery.validationEngine.js, jquery.validationEngine-en.js and
validationEngine.jquery.css
3. Add the validation class for the elements.
Validation classes
Required
Field Validation - validate[required]
Compare
Validation - validate[equals[IdforFieldtocompare]]
Minimum
Field Size Validation - validate[minSize[6]]
Maximum
Field Size Validation - validate[maxSize[6]]
Minimum
Value Validation - validate[min[25]]
Maximum
Value Validation - validate[max[25]]
Integer
Value - validate[custom[integer]]
Decimal
Value - validate[custom[number]]
Date
Validation - validate[custom[date]]
Only
Letter and Number Validation -
validate[custom[onlyLetterNumber]]
Only
Letter Validation - validate[custom[onlyLetterSp]]
Only
Number Validation - validate[custom[onlyNumberSp]]
Email
Validation - validate[custom[email]]
Email
Validation - validate[custom[phone]]
4. Once the document is ready, initialize the Validation Engine widget
to the form.
$(document).ready(function () {
$("#formID").validationEngine();
});
Example Program:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Form Validation Using Jquery</title>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script
src="jquery.validationEngine-en.js"
type="text/javascript"></script>
<script
src="jquery.validationEngine.js"
type="text/javascript"></script>
<link
href="validationEngine.jquery.css"
rel="stylesheet"
type="text/css"
/>
<script
type="text/javascript">
$(document).ready(function () {
$("#frmValidation").validationEngine();
});
</script>
</head>
<body>
<form
id="frmValidation"
runat="server">
<br
/>
<br
/>
<asp:TextBox ID="txtPassword"
runat="server"
class="validate[required]"></asp:TextBox>
<asp:TextBox ID="txtConfrmPwd"
runat="server"
class="validate[equals[txtPassword]]"></asp:TextBox>
<asp:TextBox ID="txtMinSize"
runat="server"
class="validate[required,minSize[6]]"></asp:TextBox>
<asp:TextBox ID="txtMaxSize"
runat="server"
class="validate[maxSize[6]]"></asp:TextBox>
<asp:TextBox ID="txtInteger"
runat="server"
class="validate[custom[integer]]"></asp:TextBox>
<asp:TextBox ID="txtMinVal"
runat="server"
class="validate[custom[integer,min[25]]"></asp:TextBox>
<asp:TextBox ID="txtMaxVal"
runat="server"
class="validate[custom[integer,max[25]]]"></asp:TextBox>
<asp:TextBox ID="txtDate"
runat="server"
class="validate[custom[date]]"></asp:TextBox>
<asp:TextBox ID="txtDtRangePast"
runat="server"
class="validate[custom[date,past[2014/01/01]]]"></asp:TextBox>
<asp:TextBox ID="txtDtRangeFuture"
runat="server"
class="validate[custom[date,future[2014/01/01]]]"></asp:TextBox>
<asp:TextBox ID="txtDecimel"
runat="server"
class="validate[custom[number]]"></asp:TextBox>
<asp:TextBox ID="txtLetterNumber"
runat="server"
class="validate[custom[onlyLetterNumber]]"></asp:TextBox>
<asp:TextBox ID="txtNumber"
runat="server"
class="validate[custom[onlyNumberSp]]"></asp:TextBox>
<asp:TextBox ID="txtLetter"
runat="server"
class="validate[custom[onlyLetterSp]]"></asp:TextBox>
<asp:TextBox ID="txtEmail"
runat="server"
class="validate[custom[email]]"></asp:TextBox>
<asp:TextBox ID="txtPhone"
runat="server"
class="validate[custom[phone]]"></asp:TextBox>
<asp:Button ID="btnValidate"
runat="server"
Text="Button"
/>
</form>
</body>
</html>
In the above example program, I have performed all type
of validations with the fields. Just add the validation class with the elements
for performing validations.
Form
Validation using Jquery, Page Validation with Jquery , Validate Page using
Jquery Validation Engine Plugin, Jquery Validation Engine, Validation Engine
with Jquery, All field Validation using Jquery, How to Perform All Validation
using Jquery Validation Engine, Jquery Validation, How to validate forms in
Jquery
0 comments:
Post a Comment