.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> JQuery >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Email, UserName, Password, URL Validation using JQuery

Posted By:Pankaj Mishra       Posted Date: July 18, 2009    Points: 25    Category: JQuery    URL: http://www.dotnetspark.com  

Email, UserName, password, URL Validation using JQuery in Asp.net. In this Article we will see Some useful validation Using JQuery in asp.net using Jquery Validation Plug-in must be useful for Login page or User Registration page etc
 

Email, UserName, password, URL Validation using JQuery in Asp.net.

In this Article we will see Some useful validation Using JQuery in asp.net using Jquery Validation Plug-in must be useful for Login page or User Registration page etc..
We will also see how to perform validation in a asp.net web page which uses master page.

As we know that JQuery is a javascript library and using thins we can able to write some like animation, Validation using minimum code.

Lets Start with first with a page which does not uses Master Page and later in this article we will see JQuery Validation with Master Page.

Step 1 : Download the JQuery Plug in from Here and JQuery Validation Script Plug-in From here both are .js file.

Step 2 : Add the above file reference in your asp.net web page under
Page
 Eg.



Step 3: Declare asp.net text box in your form

Step 4: Now add you Jquery validation code inside tag under tag.

For eg in this we have taken a text box with id txtUserName and form name form1

 

Now we will see one by one Email, UserName, password, URL Validation using JQuery in Asp.net.

UserName Validation Using JQuery

below is the JQuery Script to validate User Name whhich is required field and Accept minimum 5 Characters


and HTML Code for the UserName Textbox

<asp:TextBox ID="TxtUserName" runat="server">asp:TextBox>

Password Require field Validation using JQuery

Below is JQuery code to validate Password Field which is required field and should have minimum 5 characters

and the HTML code for the Password Field which is required field and should have at least 5 characters

 

Email Validation Using JQuery

here is the script to validate Email using JQuery


And HTML code for the input TextBox



Note: Here you have to set CssClass properties to "email" to validate Email Format other wise it will not validate email format.


URL Validation using JQuery

Below is Script to validate URL of website using JQuery


and the HTML code for the input Textbox for the URL


Note: Here you have to set CssClass properties to "url" to validate URL Format other wise it will not validate URL format.


JQuery Validation using Master Page

Now if you have Master page and than another webpage which consume master page than just add the reference of the script inside Head tag and in a webpage say you have
Registar.aspx than go to registar.aspx page and inside the content Tag you can Write your script tag this is the only difference of implementation of JQuery Validation for with and without master page for eg




Error Message Decoration

To Decorate error message generated by Jquey you can use css like this and you can add this your custom css file you inside Head Tag


What is the Difference Between Asp.Net Validation control and jQuery Validation and which one good.

Well the difference is Asp.net validation control will execute both in Client and server side if javascript is disabled than validation control will fired in server side where as JQuery plug-in is based
on javascript and so will will fire in client side. Now if up to you which on you should use.

jQuery Plug in is tested on IE, Firefox, Safari, Chrome and most other popular browser.


Hope this will help all to understand JQuery Validation in your asp.net web page.

If you run the sample project attached below and run it you will see JQuery validation result like this

You can download the sample code used in above example.


 Subscribe to Articles

     

Further Readings:

Responses
Author: cristian         Company URL: http://www.dotnetspark.com
Posted Date: August 24, 2009

Hi I have a problem that i can´t find the solution.

i have 1 txtbox, 1 dropdownlist and 1 select box. The dropdownlist load the select box. below some code to show how i'm validatiing the form

*************************
Script: (validate declaration)
*************************
rules:
{
cname:
{
required:true
},
ddlCities:
{
required: function (element){
return $("#ddlCities").val() < 1;
}
}
},

messages:
{
cname:
{
required: "<img src='img/cancel.png' with='20' height='20' title='Ingrese el nombre de su empresa'>"
},
ddlCities:
{
required: "<img src='img/cancel.png' with='20' height='20' title='Elija un Rubro'>"
}
}
******
HTML:

******
<form name="submitform" id="submitform" method="post" action="test.aspx" runat="server">

<input id="cname" name="cname">

<asp:DropDownList ID="ddlStates" runat="server">
<asp:ListItem Value="none">Select</asp:ListItem>
<asp:ListItem Value="1">Santa Fè</asp:ListItem>
<asp:ListItem Value="2">Buenos Aires</asp:ListItem>
</asp:DropDownList>

<select ID="ddlCities" runat="server">
</select>

this code is ok. when the select (ddlCities) don't have an option selected the validate library show the message asking choose one value of the list.

The problem is when i use this code inside of MasterPage, more exactly inside of ContentPlaceHolder. Cry

The text box validtion is ok, but the combo don't work.

I modified the code Script like:-->

*************************
Script: (validate declaration)
*************************
rules:
{
cname:
{
required:true
},
<%=ddlCities.ClientID%>:
{
required: function (element){
return $("#ddlCities").val() < 1;
}
}
},

messages:
{
cname:
{
required: "<img src='img/cancel.png' with='20' height='20' title='Ingrese el nombre de su empresa'>"
},
<%=ddlCities.ClientID%>:
{
required: "<img src='img/cancel.png' with='20' height='20' title='Elija un Rubro'>"
}
}

theorically, it should work, but it is not true.....

can you help me with this issue?


thanks in advance

Cristian

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend