RegistrationFormAdvance.aspx( HTML Designer Page)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RegistrationFormAdvance.aspx.cs" Inherits="UserRegistrationForm.RegistrationFormAdvance" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>USER REGISTRATION</title>
<style type="text/css">
.danger{
border:red solid 1px;
}
.auto-style5 {
text-align: left;
font-size: x-large;
}
.auto-style6 {
height: 299px;
width: 1240px;
margin-right: 143px;
}
.auto-style9 {
font-size: large;
}
.auto-style16 {
width: 168px;
height: 26px;
}
.auto-style17 {
height: 19px;
}
.auto-style20 {
width: 1118px;
height: 26px;
}
.auto-style23 {
width: 269px;
height: 26px;
}
.auto-style24 {
width: 269px;
height: 19px;
}
.auto-style25 {
width: 269px;
height: 36px;
}
.auto-style26 {
width: 168px;
height: 36px;
}
.auto-style27 {
width: 1118px;
height: 36px;
}
.auto-style33 {
width: 269px;
}
.auto-style34 {
text-align: left;
}
</style>
<link href="Scripts/jquery-ui.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div>
<table class="auto-style6">
<tr>
<td class="auto-style33">
</td>
<td class="auto-style5" colspan="2" style="border-color: #FFFFFF; background-color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: x-large; font-weight: normal; color: #000066;">
<div class="auto-style34">
<br />
NEW USER REGISTRATION JAVA SCRIPT FORM<asp:HiddenField ID="hfUserId" runat="server" />
<br />
</div>
<asp:Label ID="lbUserId" runat="server" Text="User No" Font-Bold="True" Font-Size="Medium" ForeColor="#006600" style="text-align: right"></asp:Label>
</td>
</tr>
<tr>
<td class="auto-style23">
</td>
<td class="auto-style16">
<asp:Label ID="lblUserName" runat="server" Text="User Name" CssClass="auto-style9" Font-Names="Microsoft Sans Serif" Font-Size="Medium"></asp:Label>
</td>
<td class="auto-style20">
<asp:TextBox ID="txtUserName" runat="server" Width="195px" Font-Names="Jameel Noori Nastaleeq" Height="19px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtUserName" ValidationGroup="Required" ErrorMessage="UserName is Required" ForeColor="Red" SetFocusOnError="True">UserName is Required</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="auto-style25">
</td>
<td class="auto-style26">
<asp:Label ID="lblPassword" runat="server" Text="Password" CssClass="auto-style9" Font-Names="Microsoft Sans Serif" Font-Size="Medium"></asp:Label>
</td>
<td class="auto-style27">
<asp:TextBox ID="txtPassword" TextMode =" Password" runat= "server" Width="197px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtPassword" ValidationGroup="Required" ErrorMessage="Password is Required" ForeColor="Red">**</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ControlToValidate="txtPassword" ErrorMessage="8 characters " ForeColor="Red" ValidationExpression="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}">Password must contain 8 characters ,1 Upper Case, 1 Number, 1 Special Character</asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td class="auto-style25">
</td>
<td class="auto-style26">
<asp:Label ID="lblConfirmPassword" runat="server" Text="Confirm Password" CssClass="auto-style9" Font-Names="Microsoft Sans Serif" Font-Size="Medium"></asp:Label>
</td>
<td class="auto-style27">
<asp:TextBox ID="txtCPassword" TextMode ="Password" runat="server" Width="200px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtCPassword" ValidationGroup="Required" ErrorMessage="Password is Required" ForeColor="Red">*</asp:RequiredFieldValidator>
<asp:CompareValidator ID="CompareValidator1" runat="server" ControlToCompare="txtPassword" ControlToValidate="txtCPassword" ErrorMessage="Passwords do not match" ForeColor="Red">Passwords do not match</asp:CompareValidator>
</td>
</tr>
<tr>
<td class="auto-style23">
</td>
<td class="auto-style16">
<asp:Label ID="lblEmailAddress" runat="server" Text="Email Address" CssClass="auto-style9" Font-Names="Microsoft Sans Serif" Font-Size="Medium"></asp:Label>
</td>
<td class="auto-style20">
<asp:TextBox ID="txtEmailAddress" runat="server" Width="200px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="txtEmailAddress" ValidationGroup="Required" ErrorMessage="Email Address is required" ForeColor="Red" Display="Dynamic">Email Address is required</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txtEmailAddress" ErrorMessage="Enter Valid Email Address" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" ForeColor="Red">Enter Valid Email Address</asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td class="auto-style23">
</td>
<td class="auto-style16">
<asp:Label ID="lblDob" runat="server" Text="Dob" CssClass="auto-style9" Font-Names="Microsoft Sans Serif" Font-Size="Medium"></asp:Label>
</td>
<td class="auto-style20">
<asp:TextBox ID="txtDob" runat="server" Width="201px"></asp:TextBox>
<%-- <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ValidationGroup="Required" ErrorMessage="Date of Birth is must" ForeColor="Red" ControlToValidate="txtDob">Dob is Required</asp:RequiredFieldValidator>--%>
</td>
</tr>
<tr>
<td class="auto-style23">
</td>
<td class="auto-style16">
<asp:Label ID="lblMobileNo" runat="server" Text="Mobile No" CssClass="auto-style9" Font-Names="Microsoft Sans Serif" Font-Size="Medium"></asp:Label>
</td>
<td class="auto-style20">
<asp:TextBox ID="txtMobileNo" runat="server" Width="200px" CausesValidation="True" MaxLength="10" ></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" ControlToValidate="txtMobileNo" ValidationGroup="Required" ErrorMessage="Mobile No is required">*</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator3" runat="server" ControlToValidate="txtMobileNo" ErrorMessage="RegularExpressionValidator" ValidationExpression="[0-9]{10}" ForeColor="Red">Invalid No</asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td class="auto-style23">
</td>
<td class="auto-style16">
<asp:Label ID="lblGender" runat="server" Text="Gender" CssClass="auto-style9" Font-Names="Microsoft Sans Serif" Font-Size="Medium"></asp:Label>
</td>
<td class="auto-style20">
<asp:RadioButton ID="RadioButton1" runat="server" OnCheckedChanged="RadioButton1_CheckedChanged" Text="Male" Checked="True" GroupName="Gender" ValidationGroup="Gender" />
<asp:RadioButton ID="RadioButton2" runat="server" OnCheckedChanged="RadioButton2_CheckedChanged" Text="Female" GroupName="Gender" ValidationGroup="Gender" />
</td>
</tr>
<tr>
<td class="auto-style23">
</td>
<td class="auto-style16">
<asp:Button ID="btnSubmit" runat="server" Text="SAVE" Width="159px" OnClick="btnSubmit_Click" ValidationGroup="Required" BackColor="#000099" ForeColor="White" />
</td>
<td class="auto-style20">
<asp:Button ID="btnReset" runat="server" Text="RESET" Width="159px" OnClick="btnReset_Click" BackColor="#000099" ForeColor="White" />
</td>
</tr>
<tr>
<td class="auto-style24">
</td>
<td class="auto-style17" colspan="2">
<asp:Label ID="message" runat="server" Font-Size="Medium" ForeColor="Red"></asp:Label>
<br />
<br />
<asp:Label ID="lblSearch" runat="server" Text="Search" ></asp:Label>
<asp:TextBox ID="txtSearchUserName" runat="server" ></asp:TextBox>
<%--
<input type="button" id="btnValidate" value="Validate" onclick="return ValidateDOB()" />--%>
<br />
<br />
<asp:GridView ID="GridView1" runat="server" CellPadding="3" GridLines="Vertical" AutoGenerateColumns="False" Font-Names="Calibri Light" BackColor="White" BorderColor="#999999" BorderStyle="None" BorderWidth="1px" >
<AlternatingRowStyle BackColor="#DCDCDC" />
<FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
<HeaderStyle BackColor="#000084" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<RowStyle BackColor="#EEEEEE" ForeColor="Black" />
<SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#0000A9" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#000065" />
<Columns>
<asp:BoundField HeaderText ="User Id" DataField ="UserID" />
<asp:BoundField HeaderText ="User Name" DataField ="UserName" />
<asp:BoundField HeaderText ="EmailAddress" DataField ="EmailAddress" />
<asp:BoundField HeaderText ="Dob" DataField ="Dob" />
<asp:BoundField HeaderText ="MobileNo" DataField ="MobileNo" />
<asp:BoundField HeaderText ="Gender" DataField ="Gender" />
<asp:TemplateField HeaderText ="Action" >
<ItemTemplate>
<asp:LinkButton ID="lbEdit" CommandName="User ID" runat="server" OnClick="lbEdit_Click" CommandArgument='<%#Eval("UserID")%>' Text="Edit" ></asp:LinkButton>
<asp:LinkButton ID="lbDelete" CommandName="User ID" runat="server" OnClick="lbDelete_Click" CommandArgument='<%#Eval("UserID")%>' Text="Delete" ></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<br />
<br />
<br />
</td>
</tr>
</table>
</div>
</form>
</body>
<script src="Scripts/jquery.min.js"></script>
<script src="Scripts/jquery-ui.min.js"></script>
<%--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>--%>
<script language="javascript" type="text/javascript">
function validationCheck() {
var summary = "";
summary += isvaliduser();
summary += isvalidpassword();
summary += isvalidConfirmpassword();
summary += isvalidDob();
summary += isvalidEmail();
summary += isvalidphoneno();
if (summary != "") {
alert(summary);
return false;
}
else {
return true;
}
}
function isvaliduser() {
var id;
var temp = document.getElementById("<%=txtUserName.ClientID %>");
id = temp.value;
if (id == "") {
document.getElementById("txtUserName").classList.add("danger");
return ("Please Enter User Name" + "\n");
}
else {
document.getElementById("txtUserName").classList.remove("danger");
return "";
}
}
function isvalidpassword() {
var id;
var temp = document.getElementById("<%=txtPassword.ClientID %>");
id = temp.value;
if (id == "") {
document.getElementById("txtPassword").classList.add("danger");
return ("Please enter password" + "\n");
}
else {
document.getElementById("txtPassword").classList.remove("danger");
return "";
}
}
function isvalidConfirmpassword() {
var uidpwd;
var uidcnmpwd;
var tempcnmpwd = document.getElementById("<%=txtCPassword.ClientID %>");
uidcnmpwd = tempcnmpwd.value;
var temppwd = document.getElementById("<%=txtPassword.ClientID %>");
uidpwd = temppwd.value;
if (uidcnmpwd == "" || uidcnmpwd != uidpwd) {
document.getElementById("txtCPassword").classList.add("danger");
return ("Please re-enter password to confrim" + "\n");
}
else {
document.getElementById("txtCPassword").classList.remove("danger");
return "";
}
}
function isvalidDob() {
var id;
var temp = document.getElementById("<%=txtDob.ClientID %>");
id = temp.value;
if (id == "") {
document.getElementById("txtDob").classList.add("danger");
return ("Please enter Date of Birth" + "\n");
}
else {
document.getElementById("txtDob").classList.remove("danger");
return "";
}
}
function isvalidEmail()
{
var id;
var temp = document.getElementById("<%=txtEmailAddress.ClientID %>");
id = temp.value;
var re = /\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
if (id == "")
{
document.getElementById("txtEmailAddress").classList.add("danger");
return ("Please Enter Email" + "\n");
}
else if (re.test(id))
{
document.getElementById("txtEmailAddress").classList.remove("danger");
return "";
}
else
{
document.getElementById("txtEmailAddress").classList.add("danger");
return ("Email should be in the form ex:abc@xyz.com" + "\n");
}
}
function isvalidphoneno()
{
var id;
var temp = document.getElementById("<%=txtMobileNo.ClientID %>");
id = temp.value;
var re;
re = /^[0-9]+$/;
var digits = /\d(10)/;
if (id == "") {
document.getElementById("txtMobileNo").classList.add("danger");
return ("Please enter phone no" + "\n");
}
else if (re.test(id))
{
document.getElementById("txtMobileNo").classList.remove("danger");
return "";
}
else
{
document.getElementById("txtMobileNo").classList.add("danger");
return ("Phone no should be digits only" + "\n");
}
}
</script>
<script type="text/javascript">
$(document).ready(function () {
SearchText();
//getDataForGrid();
});
function SearchText() {
$("#txtSearchUserName").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "RegistrationFormAdvance.aspx/GetUserName",
data: "{'UserName':'" + document.getElementById('txtSearchUserName').value + "'}",
dataType: "json",
success: function (data) {
response(data.d);
},
error: function (result) {
alert("No Match");
}
});
}
});
}
</script>
</html>
Comments
Post a Comment