JQuery Validation Plugin

Ashish Patel

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

[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

Ashish Patel

Asp.Net Form Validation Part 2 using JQuery Validation and meta Plugin

In Asp.Net Form Validation using jQuery Validation Plugin article, I explain how to use JQuery Validation Plugin in asp.net form.

Now here I will show you how to use meta plugin with jQuery Validation to validate ASP.NET form. Using Meta plugin we can right rules and message into class attribute of input.

we using same example which we used in previous article.

Step 1:

You need jQuery library, jQuery Validation plugin and meta 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>
<script type="text/javascript" src="http://jquery-multifile-plugin.googlecode.com/svn-history/r16/trunk/jquery.MetaData.js"></script>

Step 2:

 
<form id="form1" runat="server">
<asp:TextBox ID="txtName" runat="server" class="{required:true,messages:{required:'required.'}}" ></asp:TextBox>
<asp:TextBox ID="txtage" runat="server" class="{required:true,number:true,minlength:2, messages:{required:'required.',number: 'number Only!' , minlength:'mininum 2 characters.'}}" ></asp:TextBox>
<asp:TextBox ID="txtEmail" runat="server" class="{required:true, email:true,messages:{required:'required.',email: 'invalid email!' }}"></asp:TextBox>
<asp:TextBox ID="txtPass" runat="server" TextMode="Password"  class="{required:true,messages:{required:'required.'}}"></asp:TextBox>
<asp:TextBox ID="txtRePass" runat="server" TextMode="Password" class="{required:true, equalTo:'#txtPass',  messages:{required:'This field is required.', equalTo:'Value entered in this field should equal to value of Password field.'}}" ></asp:TextBox>
<asp:TextBox ID="txtUrl" runat="server" class="{required:true,url:true,messages:{required:'required.',url:'not vaild url'}}">http://</asp:TextBox>
<asp:Button ID="btnSubmit" runat="server" Text="submit" />
</form>

Step 3:

Use validate() of jQuery validation plugin on asp.net form.

<script type="text/javascript">
        $(document).ready(function () {
        $("#form1").validate();
                                  });
</script>