Website for User Login and Validations.
Ganapathiraju Aneesha Varma
Web Designer
Web Developer
Website CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration 22341A0551</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<div class="card">
<div class="card-header ">
<nav class="navbar navbar-expand-lg bg-info">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="../images/gmrit_logo.png" height=50 class="imgage-fluid"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Registration</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Login
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Student</a></li>
<li><a class="dropdown-item" href="#">Admin</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link " href="#" >Test page</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#" >Results</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div class="container mt-2">
<div class="row justify-content-around">
<div class="col-lg-6">
<div class="card">
<div class="card-header bg-success fw-bold text-center text-white p-3 mt-4">
Registration
</div>
<div class="card-body">
<form action="" method="" name="myform">
<div class="input-group m-1">
<span class="input-group-text"><i class="fa fa-user"> </i></span>
<input type="text" id="uname" class="form-control fw-bold" placeholder="Enter username..">
</div>
<!--
<div class="input-group m-1">
<span class="input-group-text"><i class="fa fa-user"> </i></span>
<input type="text" class="form-control fw-bold" placeholder="Enter username..">
</div>
-->
<div class="input-group m-1">
<input type="email" id="email" class="form-control fw-bold" placeholder="example@gmail.com">
<span class="input-group-text">@gmail.com</span>
</div>
<div class="input-group m-1">
<span class="input-group-text"><i class="fa fa-lock"> </i></span>
<input type="password" id="pwd" class="form-control fw-bold" placeholder="Enter password..">
</div>
<div class="input-group m-1">
<span class="input-group-text"><i class="fa fa-unlock"> </i></span>
<input type="password" id="cpwd" class="form-control fw-bold" placeholder="confirm password...">
</div>
<div class="d-flex form-group m-1 justify-content-around">
<label>Gender:</label>
<div class="form-check m-1 align-items-end ">
<input class="form-check-input" type="radio" id="male" name="gender" value="male">
<label class="form-check-label" for="gender">
Male
</label>
</div>
<div class="form-check my-1">
<input class="form-check-input" type="radio" id="female" name="gender" value="female">
<label class="form-check-label" for="gender">
Female
</label>
</div>
<div class="form-check my-1">
<input class="form-check-input" type="radio" id="others" name="gender" value="others">
<label class="form-check-label" for="gender">
Others
</label>
</div>
</div>
<div class="d-flex m-1 form-group justify-content-around ">
<label>Interests:</label>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="spo" name="interests" value="sports">
<label class="form-check-label" for="interests">
Sports
</label>
</div>
<div class="form-check m-1">
<input type="checkbox" class="form-check-input" id="mus" name="interests" value="music">
<label class="form-check-label" for="interests">
Music
</label>
</div>
<div class="form-check m-1">
<input type="checkbox" class="form-check-input" id="read" name="interests" value="reading">
<label class="form-check-label" for="interests">
Reading
</label>
</div>
</div>
</div>
<div class="form-check text-center d-flex mx-5 mb-2">
<input type="checkbox" id="agree" class="form-check-input" value="yes">
<label calss="form-label fw-bold">
Please confirm that you agree to our terms & conditions
</label>
</div>
<div class="text-center mb-2">
<div class="btn btn-success " onclick="validate()">Register</div>
</div>
<div class="text-center mb-2">
Already have an account?<a href="#">Login here</a>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="justify-content-around fw-bolder text-center">® Copyright-GMRIT WCAD Lab, All Right Reserved</div>
<script>
function validate(){
let user=document.myform.uname.value;
let email=document.myform.email.value;
let pword=document.myform.pwd.value;
let cpword=document.myform.cpwd.value;
let gen1=document.getElementById("male");
let gen2=document.getElementById("female");
let gen3=document.getElementById("others");
let int1=document.getElementById("spo");
let int2=document.getElementById("mus");
let int3=document.getElementById("read");
let agreement=document.getElementById("agree");
if(user===''){
alert("Fill username field");
return false;
}
if(email===''){
alert("Fill email field")
return false;
}
let atpos=email.indexOf("@");
let dotpos=email.indexOf(".");
let spa=email.indexOf(" ");
let n=email.length-1;
if((atpos!=-1 && (atpos!=0) && (atpos!=n))&&(dotpos!=-1 && (dotpos!=0) && (dotpos!=n))&&(spa==-1)){
}
else{
alert("Email should be in valid format");
return false;
}
if((dotpos-atpos)<2){
alert("Email should be in valid format");
return false;
}
if((email.length-dotpos)<2){
alert("Email should be in valid format");
return false;
}
if(pword===''){
alert("Fill password field");
return false;
}
if(pword.length<8){
alert("Password length should be minimum 8 characters");
return false;
}
if(pword.search(/[A-Z]/)<0){
alert("Password must contain a upper case letter");
return false;
}
if(pword.search(/[a-z]/)<0){
alert("Password must contain a lower case letter");
return false;
}
if(pword.search(/[0-9]/)<0){
alert("Password must contain a digit");
return false;
}
if(cpword===''){
alert("Fill confirm password field");
return false;
}
if(pword!=cpword){
alert("Password not matched.");
return false;
}
if((gen1.checked) || (gen2.checked) || (gen3.checked)){
}
else{
alert("Select the gender");
return false;
}
if((int1.checked) || (int2.checked) || (int3.checked)){
}
else{
alert("Select the interests");
return false;
}
if(agreement.checked){
}
else{
alert("Please agree for our terms and polices and then proceed");
return false;
}
alert("Successfully registered");
return true;
}
</script>
</body>
</html>
More Projects by Ganapathiraju
Resources
Dіscover Freelancers