Easy creation of Login page and Create New user (with Terms & condition) in same window Samples and examples

Title:

Easy creation of Login page and Create New user (with Terms & condition) in same window.

Problems :

In old systems for login of Existing user we are creating one page called Login.aspx and for new user we are creating one more page called Registration.aspx where new user should agree with our Terms & Condition. In this example I am explaining how to design one page with both the functionality.

What short of things we can learn from this article?

How to use Java Script for validation, built-in validation control, Custom validation control in one page?

.aspx page


<head runat="server">
    <title>Login Page</title>
//  Script for make visible True Faase as per Radio Button Selection
//------------------------------------------------------------------------------
<script language="javascript" type="text/javascript"> 
 
function log(ch)
{
    if(ch == 1)
    {       
        document.getElementById('opt').style.display='block';
        document.getElementById('opt2').style.display='none';
    }
    else
    {
        document.getElementById('opt').style.display='none';
        document.getElementById('opt2').style.display='block';
    }
}
    
    function popup(ch)
    {
        if(ch == 1){   
            document.getElementById('pop').style.visibility = 'visible';
            document.getElementById('pop').style.top = '200px';
            document.getElementById('pop').style.left = '300px';
        }
        else{   
            document.getElementById('pop').style.visibility = 'hidden';
            document.getElementById('pop').style.top = '-200px';
            document.getElementById('pop').style.left = '-1000px';
        }
    }
 
 
    </script>

//  Script for New user validation and he/she should Accept Terms and contion.
 //-----------------------------------------------------------------------------

    <script language="javascript" type="text/javascript">
 function validate()
    {
         var name=document.getElementById("<%=TextBoxName.ClientID%>").value;
         var pass=document.getElementById("<%=TextBoxRPassword.ClientID%>").value;
          var Conpass=document.getElementById("<%=TextBoxCRPassword.ClientID%>").value;
        var name_regxp=/^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
        var passnull =/^\s+$/;    
      
       if(name=='')
		{
		alert("Email Id should not be blank..!");
		document.getElementById("<%=TextBoxName.ClientID%>").focus();
		return false;
		}
      else if (name_regxp.test(name)!=true)
     
      {
                 alert("Email id is not in proper format..!");
                 document.getElementById("<%=TextBoxName.ClientID%>").focus();
                 return false;
      }
      else if(pass=='')
		{
		alert("Password should not be blank..!");
		document.getElementById("<%=TextBoxRPassword.ClientID%>").focus();
		return false;
		}
		
		else if(passnull.test(pass)==true)
		{
		alert("Password should not be blank..!");
		document.getElementById("<%=TextBoxRPassword.ClientID%>").focus();
		return false;
		}
		
		else if(Conpass=='')
		{
		alert("Confirm Password should not be blank..!");
		document.getElementById("<%=TextBoxCRPassword.ClientID%>").focus();
		return false;
		}
		
		else if(passnull.test(Conpass)==true)
		{
		alert("Confirm Password should not be blank..!");
		document.getElementById("<%=TextBoxCRPassword.ClientID%>").focus();
		return false;
		}
      
      else if(pass !=Conpass)
		{
		alert("Password and Confirm Password mismatch..!");
		document.getElementById("<%=TextBoxCRPassword.ClientID%>").focus();
		return false;
		}
      
        else if (!document.getElementById('CheckBoxChecked').checked)
        {
            alert("You should Agree with our Terms & Conditions");
            return false;
        }  
       return true;  
    }
    </script>

</head>

// Body part


<body>
    <form id="form1" runat="server">

// 1st div for Existing User..
    <div style="margin-left: 10px; width: 250px;">
        <h3>
            <b>Login Info</b></h3>
        <p>
            <b>Email :</b><br />
            <asp:TextBox ID="TextBoxName" runat="server" MaxLength="50">
</asp:TextBox>

            <asp:RequiredFieldValidator ID="RequiredFieldValidator4"
runat="server" ErrorMessage="Provide Email"
                	ControlToValidate="TextBoxName" Display="dynamic" 
			ValidationGroup="log">*</asp:RequiredFieldValidator>

            <asp:RegularExpressionValidator ID="RegularExpressionValidator2" 
			runat="server" ErrorMessage="Invalid Email"

             	ControlToValidate="TextBoxName" Display="dynamic" 
		ValidationGroup="log" 
ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">*</asp:RegularExpressionValidator>
        </p>

	// Radio buttons I have one Account, I am a new user.!

        <p style="background: #f0f0f0;">

            <input 	type="radio" 
id="radYes" name="option" 
onclick="return log(1);" checked="checked" />
            		I have one Account.
            <br />

            <input type="radio" id="radNo" name="option" onclick="return log(2);" />
            I am a new user.!
</p>

        <div id="opt">
            <p>
                <b>Password :</b><br />
                <asp:TextBox ID="TextBoxPassword" runat="server" 
TextMode="Password"  MaxLength="20"></asp:TextBox>

                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" 
				runat="server" ErrorMessage="Provide Password"
                   		ControlToValidate="TextBoxPassword" Display="dynamic" 
				ValidationGroup="log">*</asp:RequiredFieldValidator>
            </p>

            <p style="text-align: center;">
                <asp:Button ID="ButtonLogin" runat="server"
 Text="Login" OnClick="UserLoginValidationGroup="log" />

                <asp:ValidationSummary ID="ValidationSummary1" 
runat="server" ValidationGroup="log"
ShowMessageBox="true" ShowSummary="false" />
            </p>

        </div>

// Second div for New User
        <div id="opt2" style="display: none;">
            <p>
                <b>Choose Password :</b><br />
                <asp:TextBox ID="TextBoxRPassword" runat="server" TextMode="Password"
                    MaxLength="20"></asp:TextBox
            </p>

            <p>
                <b>Confirm Password :</b><br />
                <asp:TextBox ID="TextBoxCRPassword" runat="server" TextMode="Password"
                    MaxLength="20"></asp:TextBox>
            </p>

	// Check box  I Accept Terms & Condition

            <p style="background: #f0f0f0;">
                <input id="CheckBoxChecked" type="checkbox" />
                <a style="cursor: pointer" class="lnk"
			onclick="javascript:window.open
('ReadTerm.aspx','name','width=980,height=800,
scrollbars=yes,status=no,toolbar=no,resizable=no,
location=no,menubar=no,directories=no');">
                   		I Accept Terms & Condition</a>
</p>

            <p style="text-align: center;">
                <asp:Button ID="ButtonSignup" runat="server"
 Text="Signup" ValidationGroup="reg"
                    	OnClick="ButtonSignup_Click" />

                <asp:CustomValidator ID="CustomValidator1" runat="server" 
				ValidationGroup="reg" Display="Dynamic"
                    ErrorMessage="You should Agree with our Terms & Conditions" 
			ClientValidationFunction="validate();"></asp:CustomValidator>
</p>
        </div>
    </div>
    </form>
</body>

.cs file code


protected void UserLogin(object sender, EventArgs e)
{
	// checking query for Existing user..
}

protected void ButtonSignup_Click(object sender, EventArgs e)
{
	// Check if mail id exist or not.. And 
	// Insert query for new user..
}

Online Members

Easy creation of Login page and Create New user (with Terms & condition) in same window

Title:

Problems :

What short of things we can learn from this article?

Post Comment:

Email subscription