JQuery Validation plugin is very easy to use and has the advantage of being highly customizable both in functionality, such as validation rules. The purpose of this tutorial is a few lines of JavaScript specify the form and apply the validation plugin.
When it comes to client-side validate asp.net form, jQuery Validation plugin is one of the best in business. Here, I am trying to show you how to use jQuery Validation plugin in Asp.Net Form.
Step 1:
You need jQuery library and jQuery Validation plugin
<script type= "text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> <script type= "text/javascript" src= "http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate.min.js" ></script> |
Step 2:
The easiest way to specify validation rules is to add classes to form elements
< form id = "form1" runat = "server" > < asp:TextBox ID = "txtName" runat = "server" class = "required" ></ asp:TextBox > < asp:TextBox ID = "txtage" runat = "server" class = "required number" minlength = "2" ></ asp:TextBox > < asp:TextBox ID = "txtEmail" runat = "server" class = "required email" ></ asp:TextBox > < asp:TextBox ID = "txtPass" runat = "server" TextMode = "Password" class = "required" ></ asp:TextBox > < asp:TextBox ID = "txtRePass" runat = "server" TextMode = "Password" equalto = "#txtPass" class = "required" ></ asp:TextBox > < asp:Button ID = "btnSubmit" runat = "server" Text = "submit" /> </ form > |
Above form you may notice that I added class “required”, “number”, “email” etc.. and attribute equalto , minlength etc..
txtName :::
required – value required
txtage ::
required number – valid number required
minlength=”2″ – min two digit required
txtEmail::
required email – valid email required
txtRePass::
equalto – txtRePass value must equal to txtPass
txtUrl::
required url – valid Url required
[ad#inpost]
Step 3:
Use validate() of jQuery validation plugin on asp.net form.
< script type = "text/javascript" > $(document).ready(function () { $("#form1").validate(); }); </ script > |
UPDATE:
Asp.Net Form Validation Part 2 using JQuery Validation and meta Plugin
Thanks
[…] Asp.Net Form Validation using jQuery Validation Plugin article, I explain how to use JQuery Validation Plugin in asp.net […]