Asp.Net Form Validation using JQuery Validation Plugin

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:TextBox ID="txtUrl" runat="server" class="required url">http://</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

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