Wednesday, 22 October 2014

User Registration Form With ToolTip Message and Validation Using jQuery, C#.Net in Asp..Net

10/22/2014 - By Pranav Singh 0

This article will show you how you can create a registration form with field validation and tooltip message on control using jQuery and in Asp.Net.

So for this article first we will create a new application and add the below code into the .asp page.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head runat="server">
    <title>User Registration Form With Control MouseTracking ToolTip Message and Validation Using jQuery, C#.Net in Asp..Net
    <link rel="stylesheet" href="">
    <script src=""></script>
    <script src=""></script>
            text-decoration: underline;
         $(function () {
                 track: true
    <form id="form1" runat="server">
    <table width="100%" cellpadding="4" cellspacing="4">
    <td align="right" class="style1" colspan="2" style="text-align: center"><strong>
        REGISTRATION FORM</strong></td>
    <td align="right">Email Id : </td>
    <td align="left"><asp:TextBox ID="txtemail" runat="server" title="Enter your email id"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
            ControlToValidate="txtemail" ErrorMessage="*"></asp:RequiredFieldValidator>
    <td align="right">Password : </td>
    <td align="left"><asp:TextBox ID="txtpassword" runat="server"  title="Enter your password"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
            ControlToValidate="txtpassword" ErrorMessage="*"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"
            ControlToValidate="txtemail" ErrorMessage="*"

    <td align="right">Confirm Password : </td>
    <td align="left"><asp:TextBox ID="txtconfpassword" runat="server" title="Enter confirm password"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server"
            ControlToValidate="txtconfpassword" ErrorMessage="*"></asp:RequiredFieldValidator>
        <asp:CompareValidator ID="CompareValidator1" runat="server"
            ControlToCompare="txtpassword" ControlToValidate="txtconfpassword"
    <td align="right">Name : </td>
    <td align="left"><asp:TextBox ID="txtname" runat="server" title="Enter your name"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server"
            ControlToValidate="txtname" ErrorMessage="*"></asp:RequiredFieldValidator>
    <td align="right">Contact No : </td>
    <td align="left"><asp:TextBox ID="txtcontact" runat="server" title="Enter your contact no"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server"
            ControlToValidate="txtcontact" ErrorMessage="*"></asp:RequiredFieldValidator>
    <td align="right"> </td>
    <td align="left">
        <asp:Label ID="lblmessage" runat="server" style="color: #FF6666"></asp:Label>
    <td align="center" colspan="2"><asp:Button ID="btnsubmit" runat="server"
            Text="Submit" onclick="btnsubmit_Click" /></td>

In above code I have create a registration form. In this form I have added RequiredFieldValidator, CompareValidator, RegularExpressionValidator to validate the data in the form before registration. Now generate click event og the button and add the below code into the click event.

using System;
using System.Data.SqlClient;
namespace WebApplication1
    public partial class WebForm1 : System.Web.UI.Page
        protected void Page_Load(object sender, EventArgs e)


        protected void btnsubmit_Click(object sender, EventArgs e)
            /* In this you just make the email id unik field
             * so when you add duplicate email id it will give
             * exception
                SqlConnection con = new SqlConnection("Your connection string");
                string query = "Insert into UserMaster(EmailId,Password,Name,ContactNo) values('" + txtemail.Text + "','" + txtpassword.Text + "','" + txtname.Text + "','" + txtcontact.Text + "');";
                SqlDataAdapter saveda = new SqlDataAdapter(query, con);
                lblmessage.Text = "User data saved successfully.";
            catch(Exception ex)
                //Your error message

In above code email id is used as login id. In this you make the email id field as uniq field and then register. This will cause error message if user add duplicate email id. This will prevent you to write extra code to to validate the duplicate email id.

Now we have done run the application to check the output.

About the Author

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post


Please let me know your view

Free Ebooks

About Us

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Contact Us

For writing article in this website please send request by your

Email Id :

Bugs and Suggestions

As we all know that this website is for sharing knowledge and providing proper solution. So while reading the article is you find any bug or if you have any suggestion please mail us at


Top jQuery Plugins

Global Classified :
© 2014
back to top