Best example to implement stylish jQuery form validations in asp.net

stylist jquery form validation in asp.net
Click on image to enlarge
Introduction: In this article i am going to explain How to implement stylish jQuery form validation in asp.net with example. If validation fails for any field on the form then a stylish message box will pop up with the appropriate message as shown in image.

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 Example to implement Jquery form validations in asp.net and JavaScript validation in asp.net website and Show jQuery tooltip message on mouse over and Validate file extension and upload image file.

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:
jquery validation

  • 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.

  • 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.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 

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."
Previous
Next Post »

7 comments

Click here for comments
Unknown
admin
January 27, 2014 ×

...Your articles are excellent!!!! Great stuff...

Reply
avatar
January 27, 2014 ×

Thanks bro for such a wonderful comment..stay connected and keep reading..:)

Reply
avatar
Unknown
admin
January 28, 2014 ×

Hello sir...Can i give Validation Group on it. If yes then ...How to ?..Let me Know please...?

Reply
avatar
Anonymous
admin
January 29, 2014 ×

Great Code, how do you reset the page and clear all the fields and CSS/Jquery validation errors?

Reply
avatar
Unknown
admin
March 01, 2014 ×

thanks, But i have a query can i use this in bootstrap form validation ? if yes then how

Reply
avatar
Anonymous
admin
June 20, 2014 ×

If 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?

Reply
avatar
Unknown
admin
January 05, 2016 ×

Please reply me can be use validation message set accordingly legend size, not overflow

Reply
avatar

If 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..