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.