 |
| Click on image to enlarge |
Description: Whenever any developer creates any user input form like registration form, contact us form, change password form etc then it is mandatory to implement validation on the fields on the form to ensure that only valid data can be submitted to server for processing.
We can use asp.net validation controls or we can use JavaScript or jQuery validation.
In previous articles i explained the
Validation rules implemented on each field is explained as:
First Name: Can’t be left blank.
Last Name: Can’t be left blank.
Email Id: Can’t be left blank and
should be in valid email format.
Password: Can’t be left blank and
minimum 6 digits or characters are required.
Confirm Password: Can’t be left
blank and minimum 6 digits or characters are required and must match with
the Password field.
Age: Can’t be left blank and
should be digits and minimum age can be entered 18 and maximum age 25 can be entered.
Mobile No.: Can’t be left blank and should be digits and 10 digits long.
Landline No. : Can’t be left blank and should be digits and valid.
DOB: Can’t be left blank and should be in valid date format (YYY-MM-DD) format
Website: Can’t be left blank and should be in valid URL format e.g. http://www.webcodeexpert.com
City: You must select the city.
Zip: Can’t be left blank and should be digits and at least 6 digits long.
I Agree to terms and conditions: This checkbox must be checked.
Implementation: Let's create a
registration form and implement stylish validation using jQuery. I have tried
to validate almost all of the fields that are basically used on the user input forms like
textbox, dropdownlist or checkbox etc. Follow the following steps:
- First of all you need to download the sample project attached at the end of this article because "js" folder having required jQuery files and the "css" folder having style sheets is necessary for this implementation.
- Now create a new website and paste the "js" and "css" in the root directory and then add a page "default.aspx" in the website. It will look like as shown in the image below:
- In the <Head> tag of the design page (default.aspx) link the style sheets and the required jquery files as:
<link href="css/template.css"
rel="stylesheet"
type="text/css"
/>
<link href="css/validationEngine.jquery.css"
rel="stylesheet"
type="text/css"
/>
<script src="js/jquery-1.8.2.min.js"
type="text/javascript"></script>
<script src="js/jquery.validationEngine-en.js"
type="text/javascript"
charset="utf-8"></script>
<script src="js/jquery.validationEngine.js"
type="text/javascript"
charset="utf-8"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#form1").validationEngine();
});
</script>
<noscript>
<h4 style="color: #FF3300;">
Javascript is not currently enabled in your browser.<br /> You must <a href="http://support.google.com/bin/answer.py?hl=en&answer=23852"
target="_blank"
>enable Javascript </a> to run this
web page correctly.
</h4>
</noscript>
</head>
Note: Have you notice one
thing that I have used <noscript> tag in the <Head> section. This
is useful in the case if the JavaScript is disabled on the browser running the
website. This <noscript> tag executes only if the javaScript is
disabled in the browser. jQuery can work only if JavaScript is enabled. So this
is the way to detect whether JavaScript is disables or enabled and if disabled
then showing appropriate message to enable it from the browser’s setting.
You can also read my article How to enable JavaScript in asp.net to get the detailed knowledge.
You can also read my article How to enable JavaScript in asp.net to get the detailed knowledge.
- Now in the <Body> tag design the registration form as:
<form id="form1" runat="server">
<fieldset style="width:500px;">
<legend style="font-size:18px;">Registration
Form</legend>
<table>
<tr>
<td colspan="2">
<div>
<table cellpadding="0" cellspacing="10" style=" background-color:White">
<tr>
<td colspan="2">All the fields marked with (<span class="starMark">*</span>) are mandatory fields</td>
</tr>
<tr>
<td>First Name: <span class="starMark">*</span></td>
<td><asp:TextBox ID="txtfname" runat="server" CssClass="validate[required]"/></td>
</tr>
<tr>
<td>Last Name: <span class="starMark">*</span></td>
<td><asp:TextBox ID="txtlname" runat="server" CssClass="validate[required]"/></td>
</tr>
<tr >
<td>Email Id: <span class="starMark">*</span></td>
<td><asp:TextBox ID="txtemail"
runat="server" CssClass="validate[required,custom[email]]" />
</td>
</tr>
<tr >
<td>Password: <span class="starMark">*</span></td>
<td><asp:TextBox ID="txtPwd" runat="server"
TextMode="Password" CssClass="validate[required,minSize[6],maxSize[10]]"
/>
</td>
</tr>
<tr >
<td>Confirm password: <span class="starMark">*</span></td>
<td><asp:TextBox ID="txtConfirmPwd"
runat="server"
TextMode="Password" CssClass="validate[required,minSize[6],maxSize[10],equals[txtPwd]]"
/>
</td>
</tr>
<tr>
<td>Age: <span class="starMark">*</span></td>
<td><asp:TextBox ID="txtAge" runat="server" CssClass="validate[required,custom[integer],min[18],max[25]]
"/></td>
</tr>
<tr>
<td>Mobile No.: <span class="starMark">*</span></td>
<td><asp:TextBox ID="txtMobile" runat="server" CssClass="validate[required,custom[integer],minSize[10],maxSize[10]]
"/></td>
</tr>
<tr>
<td>Landline No.: <span class="starMark">*</span></td>
<td><asp:TextBox ID="txtLandline" runat="server" CssClass="validate[required,custom[phone]] "/></td>
</tr>
<tr>
<td>Date of Birth:<span class="starMark">*</span></td>
<td><asp:TextBox ID="txtDob" runat="server" CssClass="validate[required,custom[date],past[now]]
"/></td>
</tr>
<tr >
<td>Website Url: <span class="starMark">*</span></td>
<td><asp:TextBox ID="txtWebUrl"
runat="server"
CssClass="validate[required,custom[url]]
text-input" />
</td>
</tr>
<tr>
<td valign="top">Address: </td>
<td>
<asp:TextBox ID="txtaddress"
runat="server"
TextMode="MultiLine"
Rows="4"
Columns="25"/></td>
</tr>
<tr>
<td>City: <span class="starMark">*</span></td>
<td>
<asp:DropDownList ID="ddlCity"
runat="server"
CssClass="validate[required]
radio">
<asp:ListItem value="">Choose
City</asp:ListItem>
<asp:ListItem Value="CH">Chandigarh</asp:ListItem>
<asp:ListItem value="PT">Patiala</asp:ListItem>
<asp:ListItem value="PK">Panchkula</asp:ListItem>
<asp:ListItem value="AB">Ambala</asp:ListItem>
</asp:DropDownList>
</td>
</tr><tr>
<td>Zip: <span class="starMark">*</span></td>
<td>
<asp:TextBox ID="txtZip" runat="server"
CssClass="validate[required,minSize[6],maxSize[6],custom[onlyNumberSp]]
text-input"/>
</td>
</tr>
<tr>
<td> I Agree to terms and Conditions <span class="starMark">*</span></td>
<td>
<input class="validate[required] checkbox" type="checkbox"
id="agree"
name="agree"/>
</td>
</tr>
<tr>
<td></td>
<td>
<asp:Button ID="btnSubmit"
runat="server"
Text="Submit"
onclick="btnSubmit_Click"
/>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</fieldset>
</form>
Asp.Net Code
- In the code behind file write the code as:
First of all include this two required
namespaces:
using System;
using System;
using System.Drawing;
Then write the code on submit button
click event as:
protected void btnSubmit_Click(object sender, EventArgs e)
{
//write your
code here
}
Note: You can customize the
validation rules as per your requirement by making changes in "jquery.validationEngine-en.js"
contained in the "js" folder.
Download the complete example
Download the complete example
Now over to you:
" I hope you have got the best way to implement validation in
asp.net forms using jQuery and If you like my work; you can appreciate by
leaving your comments, hitting Facebook like button, following on Google+,
Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and
subscribing for receiving free updates directly to your inbox . Stay tuned and
stay connected for more technical updates."
7 comments
Click here for comments...Your articles are excellent!!!! Great stuff...
ReplyThanks bro for such a wonderful comment..stay connected and keep reading..:)
ReplyHello sir...Can i give Validation Group on it. If yes then ...How to ?..Let me Know please...?
ReplyGreat Code, how do you reset the page and clear all the fields and CSS/Jquery validation errors?
Replythanks, But i have a query can i use this in bootstrap form validation ? if yes then how
ReplyIf i use server side validation then in the code behind i have to check if(page.isvalid) is true then i proceed with my code,similarly if i use javascript validation then what i need to use in server side to make sure all javascript validation is validated?
ReplyPlease reply me can be use validation message set accordingly legend size, not overflow
ReplyIf you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..