This article will show you how you can create a registration
form with field validation and tooltip message on control using jQuery and
C#.net in Asp.Net.
Some of my previous articles are as follows: Link
Button or HyperLink With Mouse Tracking ToolTip Using jQuery in Asp..Net,
jQuery
UI Calender Open With LightBox Effect in Asp.Net MVC, jQuery
DatePicker Calendar With Dropdown Month and Year in Asp.Net, Validation
for Accepting Terms and Conditions Checkbox in Asp.Net MVC Using jQuery,
Disable
jQuery UI DatePicker Calendar On Button Click In Asp.Net, Draggable
GridView Using jQuery in Asp.Net, jQuery
Datepicker Calendar With Multiple Months in Asp.net, jQuery
Dialog Box Open On Button Click In Asp.Net.
So for this article first we will create a new asp.net
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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>User
Registration Form With Control MouseTracking ToolTip Message and Validation
Using jQuery, C#.Net in Asp..Net
</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<style>
body
{
font-size:12px;
}
.style1
{
text-decoration:
underline;
}
</style>
<script>
$(function
() {
$(document).tooltip({
track: true
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<table width="100%" cellpadding="4" cellspacing="4">
<tr>
<td align="right" class="style1" colspan="2" style="text-align: center"><strong>
REGISTRATION FORM</strong></td>
</tr>
<tr>
<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>
</tr>
<tr>
<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="*"
ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<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"
ErrorMessage="*"></asp:CompareValidator>
</td>
</tr>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
<tr>
<td align="right"> </td>
<td align="left">
<asp:Label ID="lblmessage" runat="server" style="color: #FF6666"></asp:Label>
</td>
</tr>
<tr>
<td align="center" colspan="2"><asp:Button ID="btnsubmit"
runat="server"
Text="Submit" onclick="btnsubmit_Click" /></td>
</tr>
</table>
</form>
</body>
</html>
|
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
*/
try
{
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);
saveda.SelectCommand.ExecuteNonQuery();
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
0 comments:
Please let me know your view