Login Form Validation Using JavaScript : ASP.NET C#

  <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="CoderBabaSystem.wwwroot.Login" %>


<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Coder Baba</title>

    <meta charset="UTF-8"/>

    <meta name="description" content="Free Web tutorials"/>

    <meta name="keywords" content="HTML,CSS,XML,JavaScript"/>

    <meta name="author" content="John Doe"/>

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <link href="CSS/Header.css" rel="stylesheet" type="text/css"/>

    <link href="CSS/footer.css" rel="stylesheet" type="text/css"/>

    <link href="CSS/LoginCSS.css" rel="stylesheet" type="text/css"/>


    <script language="javascript" type="text/javascript">

        function ValidateForm()

        {

            var User = document.getElementById("txtUserName").value;

            var Pass = document.getElementById("txtPassword").value;


            //Condition No. 1

            if (User == "" && Pass == "") {

                alert("Username & Password are necessary ! Please enter & try again..");

                document.getElementById("txtUserName").focus();

                return false;

            }

            else if (User == "") {

                alert("Username necessary ! Please enter Username..");

                document.getElementById("txtUserName").focus();

                return false;

            }

            else if (Pass == "") {

                alert("Password necessary ! Please enter Password..");

                document.getElementById("txtPassword").focus();

                return false;

            }

            else if (User.length == 0)

            {

                alert("Enter Username ! it can not be blank");

                document.getElementById("txtUserName").focus();

                return false;

            }

            //Condition No. 2

            else if (User.length < 4) {

                alert("Invalid Length.Username should be at least 4 character long.");

                document.getElementById("txtUserName").focus();

                return false;

            }

            else if (Pass.length < 4 || Pass.length >= 18)

            {

                alert("Invalid Length, Password should be at least 4 Character long & Max 18 Char..");

                document.getElementById("txtPassword").focus();

                return false;

            }

            return true;

            //alert("Hello you click login button");

        }

    </script>


</head>

<body>

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

        <%--This is Header Section--%>

        <header>

            <div class="wrapper">

                <h1>CODERBABA WEBSITE</h1>

                <nav>

                    <ul>

                        <li><a href="#">Home</a></li>

                        <li><a href="#">Portfolio</a></li>

                        <li><a href="#">Contact</a></li>

                        <li><a href="#">Blog</a></li>

                    </ul>

                </nav>

            </div>

        </header>

        <%--Header Section End here--%>


        <div style="width:700px;margin-left:350px;margin-top:50px;">

            <h2 style="text-align:center;background-color:lightgreen;padding:10px;">Login Form</h2>

        </div>


        <div class="imgcontainer">

            <img src="images/apple.png" width="100" height="100" alt="Avatar" class="avatar"/>

        </div>


        <div class="container">

            <label for="uname"><b>UserName</b></label>

            <asp:TextBox ID="txtUserName" runat="server" placeholder="Enter Username"></asp:TextBox>


            <label for="psw"><b>Password</b></label>

            <asp:TextBox ID="txtPassword" runat="server" placeholder="Enter Password" TextMode="Password"></asp:TextBox>

            <asp:Button ID="Button1" runat="server" Text="Login" type="submit" Font-Size="Larger" OnClick="Button1_Click" OnClientClick="return ValidateForm();"/>

            <label>

                <asp:CheckBox ID="CheckBox1" runat="server" Font-Size="Larger" Text="Remember Me"/>

            </label>

        </div>


        <div class="container" style="background-color:#f1f1f1">

            <button type="button" class="cancelbtn">Cancel</button>

            <span class="psw">Forgot<a href="#">Password?</a></span>

        </div>


        <br/>


        <footer>

            <div class="wrapper">

                <div id="footer-info">

                    <p>Copyright@2020 CODERBABA.in All rights reserved</p>

                    <p><a href="#">Terms of Services</a> || <a href="#">Privacy</a></p>

                </div>


                <div id="footer-links">

                    <ul>

                        <li><h5>Home</h5></li>

                        <li><a href="#">About us</a></li>

                        <li><a href="#">Meet the Team</a></li>

                        <li><a href="#">What we do?</a></li>

                        <li><a href="#">Careers</a></li>

                    </ul>


                    <ul>

                        <li><h5>Company</h5></li>

                        <li><a href="#">About us</a></li>

                        <li><a href="#">Meet the Team</a></li>

                        <li><a href="#">What we do?</a></li>

                        <li><a href="#">Careers</a></li>

                    </ul>

                </div>

                <div class="clear"></div>

            </div>

        </footer>

    </form>

</body>

</html>

Above File is CoderBabaSystem\wwwroot\Login.aspx


















a{
    text-decoration:none;
    color:#444;
}
a:hover{
    color:red;
}
strong{
    font-weight:bold;
}
small{
    font-size:13px;
    color:#777;
    font-style:italic;
}
.clear{
    clear:both;
}
.wrapper{
    margin:0 auto;
    padding:0 10px;
    width:940px;
}
header{
    height:120px;
    background-color:lightblue;
}
header h1{
    float:left;
    margin-top:32px;
}
header h1 .color{
    color:#02b8dd;
}
header nav{
    float:right;
}
header nav ul li{
    float:left;
    display:inline-block;
    margin-top:50px;
}
header nav ul li a{
    color:#444;
    text-transform:uppercase;
    font-weight:bold;
    display:block;
    margin-right:20px;
}
Above File is CoderBabaSystem\wwwroot\CSS\Header.css

















footer {
    padding:60px 0;
    background-color:#f8fafa;
}
#footer-info {
    width:380px;
    float:left;
    margin-top:10px;
}
#footer-links {
    width:520px;
    float:right;
}
#footer-links ul {
    width:150px;
    float:left;
    margin-left:20px;
}
#footer-links ul li {
    margin:10px 0;
}
Above File is CoderBabaSystem\wwwroot\CSS\footer.css




















<style>
body {
    font-family:Arial,Helvetica,sans-serif;
}
/*Full-width input fields*/
input[type=text], input[type=password] {
    width:100%;
    padding: 12px 20px;
    margin:8px 0;
    display:inline-block;
    border:1px solid #ccc;
    box-sizing:border-box;
}

/*set a style for all buttons*/
#Button1 {
    background-color:#4CAF50;
    color:white;
    padding:14px 20px;
    margin:8px 0;
    border:none;
    cursor:pointer;
    width:100%;
}
button:hover{
    opacity:0.8;
}

/*Extra style for the cancel button*/
.cancelbtn {
    width:auto;
    padding:10px 18px;
    background-color:#f44336;
}

/*Center the image and position the close button*/
.imgcontainer {
    text-align:center;
    margin:24px 0 12px 0;
    position:relative;
}
img.avatar{
    width:8%;
    border-radius:10%;
}
.container {
    padding:16px;
    justify-content:center;
}
span.psw {
    float:right;
    padding-top:16px;
}

</style>
Above File is CoderBabaSystem\wwwroot\CSS\LoginCSS.css




Comments

Post a Comment

Popular posts from this blog

Create a User Registration Form in ASP.NET using SQL Server, Visual Studio 2022 & Bootstrap

Image
 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="userreg.aspx.cs" Inherits="Registration_Form.userreg" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">     <title>User Registration</title>     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"/>     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> </head> <body>     <div class="container">         <form class="row g-3 bg-light" runat="server" meth...
Read more

Create a Simple Login Form in ASP.NET using Visual Studio 2022

Image
 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="login.aspx.cs" Inherits="LoginFormASP.login" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">     <title></title> </head> <body>     <h1 align="center">Login Form</h1>     <form id="form1" runat="server">         <table align="center">             <tr>                 <td>Username</td>                 <td>                     <asp:TextBox ID="txtUser" runat="server"></asp:TextBox>                 </td>             </tr>             <tr>       ...
Read more

SqlCommand Class ADO.Net | ExecuteNonQuery | ExecuteReader | ExecuteScalar

Image
 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Data; using System.Data.SqlClient; using System.Configuration; namespace SQLConnectionADO {     internal class Program     {         static void Main(string[] args)         {             Program.Connection();             Console.ReadLine();         }         static void Connection()         {             string cs = ConfigurationManager.ConnectionStrings["dbcs"].ConnectionString;             SqlConnection con = null;             try             {                 using (con = new SqlConnection(cs))       ...
Read more