20:49
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="stylesheet" type="text/css" href="StyleSheet.css" />
<title>HaZa CS | www.hazacs.com</title>
<script src="./JS.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>Employee Registration From</h1>
<p class="textRed">
Enter Your First Name:*
<asp:TextBox ID="First_Name" Class="txtBoxesOrange" runat="server"></asp:TextBox>
<br />
<br />
Enter Your Last Name:*
<asp:TextBox ID="Last_Name" Class="txtBoxesOrange" runat="server"></asp:TextBox>
</p>
<br />
<p>
Gender:
    Male:
<asp:RadioButton ID="Male_Button" GroupName="Gender" runat="server" />
    Female:
<asp:RadioButton ID="Female_Button" GroupName="Gender" runat="server" />
<br />
<br />
<br />
Date of Birth:
<br />
<br />
Month:
<asp:DropDownList ID="Month_List" runat="server">
<asp:ListItem Text="Select Month" Value="0"></asp:ListItem>
<asp:ListItem Text="January" Value="Jan"></asp:ListItem>
<asp:ListItem Text="February" Value="Feb"></asp:ListItem>
<asp:ListItem Text="March" Value="Mar"></asp:ListItem>
<asp:ListItem Text="April" Value="Apr"></asp:ListItem>
<asp:ListItem Text="May" Value="May"></asp:ListItem>
<asp:ListItem Text="June" Value="Jun"></asp:ListItem>
<asp:ListItem Text="July" Value="Jul"></asp:ListItem>
<asp:ListItem Text="August" Value="Aug"></asp:ListItem>
<asp:ListItem Text="September" Value="Sep"></asp:ListItem>
<asp:ListItem Text="October" Value="Oct"></asp:ListItem>
<asp:ListItem Text="November" Value="Nov"></asp:ListItem>
<asp:ListItem Text="December" Value="Dec"></asp:ListItem>
</asp:DropDownList>
Year:
<asp:DropDownList ID="Year_list" runat="server">
<asp:ListItem Text="Select Year" Value="0"></asp:ListItem>
<asp:ListItem Text="2000" Value="2000"></asp:ListItem>
<asp:ListItem Text="2001" Value="2001"></asp:ListItem>
<asp:ListItem Text="2002" Value="2002"></asp:ListItem>
<asp:ListItem Text="2003" Value="2003"></asp:ListItem>
<asp:ListItem Text="2004" Value="2004"></asp:ListItem>
<asp:ListItem Text="2005" Value="2005"></asp:ListItem>
<asp:ListItem Text="2006" Value="2006"></asp:ListItem>
<asp:ListItem Text="2007" Value="2007"></asp:ListItem>
</asp:DropDownList>
</p>
<br />
<p class="textRed">
Enter Your username:*
<asp:TextBox ID="username" Class="txtBoxesOrange" runat="server"></asp:TextBox>
<br />
<br />
Enter Your Password:*
<asp:TextBox ID="password" TextMode="Password" Class="txtBoxesOrange" runat="server"></asp:TextBox>
<br />
<br />
Re-enter Your Password:*
<asp:TextBox ID="re_password" TextMode="Password" Class="txtBoxesOrange" runat="server"></asp:TextBox>
</p>
<p>
Type your home address:
<asp:TextBox ID="address" Class="txtBoxes" runat="server"></asp:TextBox>
<br />
<br />
Type your e-mail address:
<asp:TextBox ID="email" Class="txtBoxes" runat="server"></asp:TextBox>
<br />
<br />
Comments:
<asp:TextBox ID="comments" TextMode="MultiLine" runat="server"></asp:TextBox>
</p>
<p style="align-content: center">
<asp:Button ID="submit" CssClass="buttonCSS" OnClientClick="Submit()" runat="server" Text="Submit" />
<asp:Button ID="reset" CssClass="buttonCSS" OnClientClick="Reset()" runat="server" Text="Reset" />
</p>
</div>
</form>
</body>
</html>
CSS
h1 {
font: 25px ;
color: blue;
text-align: center;
}
.textRed {
font: 16px Times New Roman;
color: red;
text-align: center;
font-weight: bold;
}
p {
font: 16px Times New Roman;
color: black;
text-align: center;
}
.txtBoxesOrange {
background: white;
border: 1px solid #ffa853;
border-radius: 5px;
box-shadow: 0 0 5px 3px #ffa853;
color: #666;
width: 165px;
outline: none;
}
.txtBoxes {
background: white;
border: 1px double #DDD;
border-radius: 5px;
box-shadow: 0 0 5px #333;
color: #666;
width: 165px;
outline: none;
}
.buttonCSS {
padding: 5px;
background-color: #dcdcdc;
border: 1px solid #666;
color: #000;
text-decoration: none;
}
JavaScript
function Submit() {
if (document.getElementById('First_Name').value == "")
alert("First Name shouldn't be empty");
else if
(checkName(document.getElementById('First_Name').value)) {
if (document.getElementById('Last_Name').value == "")
alert("Last Name shouldn't
be empty");
else if
(checkName(document.getElementById('Last_Name').value)) {
if
(document.getElementById('username').value
== "")
alert("Username shouldn't be
empty");
else
if (document.getElementById('password').value == "")
alert("Password shouldn't be
empty");
else
if (document.getElementById('re_password').value == "")
alert("Re-enter the
password");
else
{
password =
document.getElementById('password').value;
re_password =
document.getElementById('re_password').value;
if (password != re_password)
alert("Passwords don't
match");
if (document.getElementById('username').value == "")
alert("Username shouldn't be
empty");
else if
(!checkEmail(document.getElementById('email').value))
alert("Invalid E-mail");
}
}
}
}
function checkName(name) {
length = name.length;
for (i = 0; i < length; i++)
if ((name[i] < 'A' || name[i] > 'Z') && (name[i] < 'a' || name[i] > 'z')) {
alert("Name can only contain
alphabets");
return false;
}
return true;
}
function checkEmail(email) {
length = email.length;
for (i = 0; i < length; i++)
{
if (email[i] == '@')
break
}
if (i != length) {
i++;
if ((email[i] < 'A' || email[i] > 'Z') && (email[i] < 'a' || email[i] > 'z'))
return false;
else {
com = ".com"
for
(i; i < length; i++) {
for (j = 0, k = i; j < 4; j++, k++)
if (email[k] != com[j])
break;
if (j == 4)
break;
}
if
(i != length)
return true;
else
return false;
}
}
else
return false;
}
function Reset() {
document.getElementById('First_Name').value = "";
document.getElementById('Last_Name').value = "";
document.getElementById('Male_Button').value = "";
document.getElementById('Female_Button').value = "";
document.getElementById('Month_List').value = 0;
document.getElementById('Year_list').value = 0;
document.getElementById('username').value = ""
document.getElementById('password').value = "";
document.getElementById('re_password').value = "";
document.getElementById('username').value = "";
document.getElementById('address').value = "";
document.getElementById('email').value = "";
document.getElementById('comments').value = "";
}
No comments
Post a Comment