I am creating a program called “Login & Sign-up Form”. The program involve Java Servlet, HTML, CSS which are working fine and JavaScript which i am having problem. I am using JavaScript to validate the username, password and email before submitting them. However, when i click on the “Submit” button, it directly goes to page showing “log @ register success” without checking the three fields. I noticed that the email filed is only checked as it will be done by the browser automatically. Please help me to solve this issue as i do not know what is the problem. Thank you very much. Below is the html code followed by css code. I also add the java servlet code too add below. Your help is much appreciated.
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="Style.css" />
<title>Sign in & Sign up Form</title>
</head>
<script src="https://kit.fontawesome.com/64d58efce2.js" crossorigin="anonymous" ></script>
<body>
<div class="container">
<div class="forms-container">
<!---------------------------- this is for login form ------------------------------------->
<div class="login-signup">
<form action="Logsuccess" class="log-in-form" method="get">
<h2 class="title">Log-in</h2>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" name="username" placeholder="Username" />
</div>
<br>
<span id = "user" class = "text-danger"> </span>
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" name="password" placeholder="Password" />
</div>
<br>
<span id = "pass" class = "text-danger"> </span>
<input type="submit" value="Login" class="btn solid" />
<p class="social-text">Or Sign in with social platforms</p>
<div class="social-media">
<a href="#" class="social-icon"> <i class="fab fa-facebook-f"> </i> </a>
<a href="#" class="social-icon"> <i class="fab fa-twitter"> </i> </a>
<a href="#" class="social-icon"> <i class="fab fa-google"> </i> </a>
<a href="#" class="social-icon"> <i class="fab fa-linkedin-in"></i> </a>
</div>
</form>
<!---------------------------- this is for signup form ------------------------------------->
<!-- <form action="#" class="sign-up-form" method="post" onsubmit="return validation()"> -->
<form action="RegSuccess" class="sign-up-form" method="post">
<h2 class="title">Sign up</h2>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" name="Username" placeholder="Username" />
</div>
<br>
<span id = "user" class = "text-danger"> </span>
<div class="input-field">
<i class="fas fa-envelope"></i>
<input type="email" placeholder="Email" />
</div>
<br>
<span id = "emailAddress" class = "text-danger"> </span>
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" name="Password" placeholder="Password" />
</div>
<br>
<span id = "pass" class = "text-danger"> </span>
<input type="submit" class="btn" value="Sign up" />
<p class="social-text">Or Sign up with social platforms</p>
<div class="social-media">
<a href="#" class="social-icon"> <i class="fab fa-facebook-f"> </i> </a>
<a href="#" class="social-icon"> <i class="fab fa-twitter"> </i> </a>
<a href="#" class="social-icon"> <i class="fab fa-google"> </i> </a>
<a href="#" class="social-icon"> <i class="fab fa-linkedin-in"></i> </a>
</div>
</form>
</div>
</div>
<!---------------------------- this is in login page for asking to signup------------------------------------->
<div class="panels-container">
<div class="panel left-panel">
<div class="content">
<h3>Don't Have An Account ?</h3>
<p>
Your are always welcome to join us!!!
</p>
<button class="btn transparent" id="sign-up-btn"> Sign up </button>
</div>
<img src="img/log.svg" class="image" alt="" />
</div>
<!---------------------------- this is in signup page for asking to login------------------------------------->
<div class="panel right-panel">
<div class="content">
<h3>Are You One of Us ?</h3>
<p>
Let's Log In Then !!!
</p>
<button class="btn transparent" id="sign-in-btn"> Log in </button>
</div>
<img src="img/register.svg" class="image" alt="" />
</div>
</div>
</div>
<script>
//---------------------------- this is javascript for the buttons -------------------------------------//
const sign_in_btn = document.querySelector("#sign-in-btn");
const sign_up_btn = document.querySelector("#sign-up-btn");
const container = document.querySelector(".container");
sign_up_btn.addEventListener("click", () => {
container.classList.add("sign-up-mode");
});
sign_in_btn.addEventListener("click", () => {
container.classList.remove("sign-up-mode");
});
//---------------------------- start of javascript for validation -------------------------------------//
function validation()
{
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
//validation for username
if (username == null || username == "")
{
document.getElementById('user').innerHTMl = "Username cannot be empty";
return false;
}
else if(username.length < 3 || username.length > 30)
{
document.getElementById('user').innerHTMl = "Username must be at least 3 characters long.";
return false;
}
else
{
document.getElementById('user').innerHTMl = "";
}
//validation for password
if (password == null || password == "")
{
document.getElementById('pass').innerHTMl = "Password cannot be empty";
return false;
}
else if(password.length <= 4 || password.length >= 20)
{
document.getElementById('pass').innerHTMl = "Password must be at least 4 characters long.";
return false;
}
else
{
document.getElementById('pass').innerHTMl = "";
}
//validation for email
if (email == null || email == "")
{
document.getElementById('emailAddress').innerHTMl = "Email cannot be empty";
return false;
}
else if(email.indexOf('@') <= 0)
{
document.getElementById('emailAddress').innerHTMl = " @ symbol is on invalid position";
return false;
}
else
{
document.getElementById('emailAddress').innerHTMl = "";
}
}
//---------------------------- end of javascript for validation -------------------------------------//
</script>
</body>
</html>
***LOGINFAIL.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Success</title>
</head>
<script src="https://kit.fontawesome.com/64d58efce2.js" crossorigin="anonymous" ></script>
<style>
body {
background: #041C32;
}
#card {
position: relative;
width: 400px;
display: block;
margin: 150px auto;
text-align: center;
font-family: 'Source Sans Pro', sans-serif;
}
#upper-side {
padding: 2em;
background-color: #ECB365;
display: block;
color: #fff;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
}
#checkmark {
font-weight: lighter;
fill: #fff;
margin: -3.5em auto auto 20px;
}
#status {
font-weight: lighter;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 1em;
margin-top: auto;
margin-bottom: 0;
}
#lower-side {
padding: 2em 2em 5em 2em;
background: #fff;
display: block;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}
#message {
margin-top: -.5em;
color: #757575;
letter-spacing: 1px;
}
#contBtn {
position: relative;
top: 1.5em;
text-decoration: none;
background: #064663;
color: #fff;
margin: auto;
padding: .8em 3em;
-webkit-box-shadow: 0px 15px 30px rgba(50, 50, 50, 0.21);
-moz-box-shadow: 0px 15px 30px rgba(50, 50, 50, 0.21);
box-shadow: 0px 15px 30px rgba(50, 50, 50, 0.21);
border-radius: 25px;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
#contBtn:hover {
-webkit-box-shadow: 0px 15px 30px rgba(50, 50, 50, 0.41);
-moz-box-shadow: 0px 15px 30px rgba(50, 50, 50, 0.41);
box-shadow: 0px 15px 30px rgba(50, 50, 50, 0.41);
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
</style>
<body>
<section>
<div class="rt-container">
<div class="col-rt-12">
<div class="Scriptcontent">
<div id='card' class="animated fadeIn">
<div id='upper-side'>
<i class="fa fa-check"></i>
<br>
<h3 id='status'> Login Failed </h3>
</div>
<div id='lower-side'>
<p id='message'>
Your login has failed due to an invalid username or password <br><br>
Please try again!!!!
</p>
<a href="index.html" id="contBtn">Continue</a>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
REGISTERSUCCESS.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Success</title>
</head>
<script src="https://kit.fontawesome.com/64d58efce2.js" crossorigin="anonymous" ></script>
<style>
body {
background: #041C32;
}
#card {
position: relative;
width: 400px;
display: block;
margin: 150px auto;
text-align: center;
font-family: 'Source Sans Pro', sans-serif;
}
#upper-side {
padding: 2em;
background-color: #ECB365;
display: block;
color: #fff;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
}
#checkmark {
font-weight: lighter;
fill: #fff;
margin: -3.5em auto auto 20px;
}
#status {
font-weight: lighter;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 1em;
margin-top: auto;
margin-bottom: 0;
}
#lower-side {
padding: 2em 2em 5em 2em;
background: #fff;
display: block;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}
#message {
margin-top: -.5em;
color: #757575;
letter-spacing: 1px;
}
#contBtn {
position: relative;
top: 1.5em;
text-decoration: none;
background: #064663;
color: #fff;
margin: auto;
padding: .8em 3em;
-webkit-box-shadow: 0px 15px 30px rgba(50, 50, 50, 0.21);
-moz-box-shadow: 0px 15px 30px rgba(50, 50, 50, 0.21);
box-shadow: 0px 15px 30px rgba(50, 50, 50, 0.21);
border-radius: 25px;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
#contBtn:hover {
-webkit-box-shadow: 0px 15px 30px rgba(50, 50, 50, 0.41);
-moz-box-shadow: 0px 15px 30px rgba(50, 50, 50, 0.41);
box-shadow: 0px 15px 30px rgba(50, 50, 50, 0.41);
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
</style>
<body>
<section>
<div class="rt-container">
<div class="col-rt-12">
<div class="Scriptcontent">
<div id='card' class="animated fadeIn">
<div id='upper-side'>
<i class="fa fa-check"></i>
<br>
<h3 id='status'> Register Success </h3>
</div>
<div id='lower-side'>
<p id='message'>
Congratulations, your account has been successfully created. <br><br>
Log-in to your account now !!!!
</p>
<a href="index.html" id="contBtn">Continue</a>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
css code
@charset "ISO-8859-1";
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: #ECB365;
}
body,
input {
font-family: "Poppins", sans-serif;
}
.container {
position: relative;
width: 100%;
background-color: #041C32;
min-height: 100vh;
overflow: hidden;
}
.forms-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.login-signup {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
left: 75%;
width: 50%;
transition: 1s 0.7s ease-in-out;
display: grid;
grid-template-columns: 1fr;
z-index: 5;
}
form {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0rem 5rem;
transition: all 0.2s 0.7s;
overflow: hidden;
grid-column: 1 / 2;
grid-row: 1 / 2;
}
form.sign-up-form {
opacity: 0;
z-index: 1;
}
form.log-in-form {
z-index: 2;
}
.title {
font-size: 2.2rem;
color: #ECB365;
margin-bottom: 10px;
}
.input-field {
max-width: 380px;
width: 100%;
background-color: #ECB365;
margin: 10px 0;
height: 55px;
border-radius: 55px;
display: grid;
grid-template-columns: 15% 85%;
padding: 0 0.4rem;
position: relative;
}
.input-field i {
text-align: center;
line-height: 55px;
color: #444444;
transition: 0.5s;
font-size: 1.1rem;
}
.input-field input {
background: none;
outline: none;
border: none;
line-height: 1;
font-weight: 600;
font-size: 1.1rem;
color: #041C32;
}
.input-field input::placeholder {
color: #444444;
font-weight: 500;
}
.social-text {
padding: 0.7rem 0;
font-size: 1rem;
}
.social-media {
display: flex;
justify-content: center;
}
.social-icon {
height: 46px;
width: 46px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0.45rem;
color: #ECDBBA;
border-radius: 50%;
border: 1px solid #fff;
text-decoration: none;
font-size: 1.1rem;
transition: 0.3s;
}
.social-icon:hover {
color: #ECB365;
border-color: #ECB365;
}
.btn {
width: 150px;
background-color: #064663;
border: none;
outline: none;
height: 49px;
border-radius: 49px;
color: #fff;
text-transform: uppercase;
font-weight: 600;
margin: 10px 0;
cursor: pointer;
transition: 0.5s;
}
.btn:hover {
background-color: #4d84e2;
}
.panels-container {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.container:before {
content: "";
position: absolute;
height: 2000px;
width: 2000px;
top: -10%;
right: 48%;
transform: translateY(-50%);
background-image: linear-gradient(-45deg, #064663 0%, #064663 100%);
transition: 1.8s ease-in-out;
border-radius: 50%;
z-index: 6;
}
.image {
width: 100%;
transition: transform 1.1s ease-in-out;
transition-delay: 0.4s;
}
.panel {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-around;
text-align: center;
z-index: 6;
}
.left-panel {
pointer-events: all;
padding: 3rem 17% 2rem 12%;
}
.right-panel {
pointer-events: none;
padding: 3rem 12% 2rem 17%;
}
.panel .content {
color: #fff;
transition: transform 0.9s ease-in-out;
transition-delay: 0.6s;
}
.panel h3 {
font-weight: 600;
line-height: 1;
font-size: 1.5rem;
}
.panel p {
font-size: 0.95rem;
padding: 0.7rem 0;
}
.btn.transparent {
margin: 0;
background: #041C32;
/*border: 2px solid #fff;*/
width: 130px;
height: 41px;
font-weight: 600;
font-size: 0.8rem;
}
.btn.transparent:hover {
background-color: #4d84e2;
}
.right-panel .image,
.right-panel .content {
transform: translateX(800px);
}
/* ANIMATION */
.container.sign-up-mode:before {
transform: translate(100%, -50%);
right: 52%;
}
.container.sign-up-mode .left-panel .image,
.container.sign-up-mode .left-panel .content {
transform: translateX(-800px);
}
.container.sign-up-mode .login-signup {
left: 25%;
}
.container.sign-up-mode form.sign-up-form {
opacity: 1;
z-index: 2;
}
.container.sign-up-mode form.log-in-form {
opacity: 0;
z-index: 1;
}
.container.sign-up-mode .right-panel .image,
.container.sign-up-mode .right-panel .content {
transform: translateX(0%);
}
.container.sign-up-mode .left-panel {
pointer-events: none;
}
.container.sign-up-mode .right-panel {
pointer-events: all;
}
@media (max-width: 870px) {
.container {
min-height: 800px;
height: 100vh;
}
.login-signup {
width: 100%;
top: 95%;
transform: translate(-50%, -100%);
transition: 1s 0.8s ease-in-out;
}
.login-signup,
.container.sign-up-mode .login-signup {
left: 50%;
}
.panels-container {
grid-template-columns: 1fr;
grid-template-rows: 1fr 2fr 1fr;
}
.panel {
flex-direction: row;
justify-content: space-around;
align-items: center;
padding: 2.5rem 8%;
grid-column: 1 / 2;
}
.right-panel {
grid-row: 3 / 4;
}
.left-panel {
grid-row: 1 / 2;
}
.image {
width: 200px;
transition: transform 0.9s ease-in-out;
transition-delay: 0.6s;
}
.panel .content {
padding-right: 15%;
transition: transform 0.9s ease-in-out;
transition-delay: 0.8s;
}
.panel h3 {
font-size: 1.2rem;
}
.panel p {
font-size: 0.7rem;
padding: 0.5rem 0;
}
.btn.transparent {
width: 110px;
height: 35px;
font-size: 0.7rem;
}
.container:before {
width: 1500px;
height: 1500px;
transform: translateX(-50%);
left: 30%;
bottom: 68%;
right: initial;
top: initial;
transition: 2s ease-in-out;
}
.container.sign-up-mode:before {
transform: translate(-50%, 100%);
bottom: 32%;
right: initial;
}
.container.sign-up-mode .left-panel .image,
.container.sign-up-mode .left-panel .content {
transform: translateY(-300px);
}
.container.sign-up-mode .right-panel .image,
.container.sign-up-mode .right-panel .content {
transform: translateY(0px);
}
.right-panel .image,
.right-panel .content {
transform: translateY(300px);
}
.container.sign-up-mode .login-signup {
top: 5%;
transform: translate(-50%, 0);
}
}
@media (max-width: 570px) {
form {
padding: 0 1.5rem;
}
.image {
display: none;
}
.panel .content {
padding: 0.5rem 1rem;
}
.container {
padding: 1.5rem;
}
.container:before {
bottom: 72%;
left: 50%;
}
.container.sign-up-mode:before {
bottom: 28%;
left: 50%;
}
}
RegSucess.java
package com.assignmentwpj;
import jakarta.servlet.RequestDispatcher;
import jakarta.servlet.ServletConfig;
import jakarta.servlet.ServletContext;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
public class RegSuccess extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public RegSuccess() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see Servlet#init(ServletConfig)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.getWriter().append("Served at : ").append(request.getContextPath());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html");
String Username = request.getParameter("Username");
String Password = request.getParameter("Password");
ServletContext context = getServletContext();
context.setAttribute("Username", Username);
context.setAttribute("Password", Password);
RequestDispatcher req = request.getRequestDispatcher("registersuccess.html");
req.forward(request, response);
}
}
LogSucess.java
package com.assignmentwpj;
import jakarta.servlet.RequestDispatcher;
import jakarta.servlet.ServletContext;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
public class Logsuccess extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public Logsuccess() {
super();
// TODO Auto-generated constructor stub
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
String username = request.getParameter("username");
String password = request.getParameter("password");
PrintWriter writer = response.getWriter();
ServletContext context = getServletContext();
String UserName =(String)context.getAttribute("Username");
String PassWord =(String)context.getAttribute("Password");
if(username.equals(UserName) && password.equals(PassWord))
{
RequestDispatcher req = request.getRequestDispatcher("loginsuccess.html");
req.forward(request, response);
}
else
{
RequestDispatcher req = request.getRequestDispatcher("LoginFail.html");
req.forward(request, response);
}
}
}
Advertisement
Answer
In addition to Jon P’s answer adding “required” in your html like:
<input type="password" name="password" placeholder="Password" required/>
will make it a required field for submission, this wont fix the validation problem but right now you would not need to give any response to continue