This is a register form I'm currently working on it. The problem is that the JavaScript only validates the first field in the form which is the "username" field only, but not the rest of it. If i change the code by moving the password field to above, then the code validates for the passwords only. and same goes for the email address field. May I know, how to solve this issue?. Your help is much appreciated. I'm having this error only in Eclipse IDE application. BUT, WHEN THIS CODE IS DONE IN FIDDLE, IT WORKS FINE. THE CODE IN THE FIDDLE IS IN THIS LINK: https://jsfiddle.net/dbvnkcfm/5/.
Please help solve this issue, because I'm new to JavaScript.
Below is the code in my Eclipse IDE.
@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%;
}
}<!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 >
<div >
<!---------------------------- this is for login form ------------------------------------->
<div >
<form action="Logsuccess" method="get">
<h2 >Log-in</h2>
<div >
<i ></i>
<input type="text" name="username" placeholder="Username" id = "user" class = "text-danger"/>
</div>
<br>
<div >
<i ></i>
<input type="password" name="password" placeholder="Password" id = "pass" class = "text-danger"/>
</div>
<br>
<input type="submit" value="Login" />
<p >Or Sign in with social platforms</p>
<div >
<a href="#" > <i > </i> </a>
<a href="#" > <i > </i> </a>
<a href="#" > <i > </i> </a>
<a href="#" > <i ></i> </a>
</div>
</form>
<!---------------------------- this is for signup form ------------------------------------->
<!-- <form action="#" method="post" onsubmit="return validation()"> -->
<!-- <form action="RegSuccess" method="post">-->
<form action="RegConfirm.php" method="post" onSubmit="return Register()">
<h2 >Sign up</h2>
<div >
<i ></i>
<input type="text" name="Username" placeholder="Username" id = "user" class = "text-danger"/>
</div>
<br>
<div >
<i ></i>
<input type="email" name="email" placeholder="Email" id = "emailAddress" class = "text-danger"/>
</div>
<br>
<div >
<i ></i>
<input type="password" name="Password" placeholder="Password" id = "pass" class = "text-danger"/>
</div>
<br>
<input type="submit" value="Sign up" />
</form>
</div>
</div>
<!---------------------------- this is in login page for asking to signup------------------------------------->
<div >
<div >
<div >
<h3>Don't Have An Account ?</h3>
<p>
Your are always welcome to join us!!!
</p>
<button id="sign-up-btn"> Sign up </button>
</div>
<img src="img/log.svg" alt="" />
</div>
<!---------------------------- this is in signup page for asking to login------------------------------------->
<div >
<div >
<h3>Are You One of Us ?</h3>
<p>
Let's Log In Then !!!
</p>
<button id="sign-in-btn"> Log in </button>
</div>
<img src="img/register.svg" 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 Register()
{
return validation();
}
function validation()
{
var user = document.getElementById('user').value;
var emailAddress = document.getElementById('emailAddress').value;
var pass = document.getElementById('pass').value;
console.log(user)
if (user == null || user == "")
{
alert ("Username cannot be empty");
return false;
}
else if(user.length < 3 || user.length > 30)
{
alert ("Username must be at least 3 characters long.");
return false;
}
else
{
return true;
}
console.log(emailAddress)
if (emailAddress == null || emailAddress == "")
{
alert ("Email cannot be empty");
return false;
}
else if(emailAddress.indexOf('@') <= 0)
{
alert (" @ symbol is on invalid position");
return false;
}
else
{
document.getElementById('emailAddress').innerHTMl = "";
}
console.log(pass)
if (pass == null || pass == "")
{
alert ("Password cannot be empty");
return false;
}
else if(pass.length <= 4 || pass.length >= 20)
{
alert ("Password must be at least 4 characters long.");
return false;
}
else
{
document.getElementById('pass').innerHTMl = "";
}
}
//---------------------------- end of javascript for validation -------------------------------------//
</script>
</body>
</html>CodePudding user response：
You have duplicated IDs so I add 's' for each ID in signup form also when you use return It's something like you break the function. This should work for you
<!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="main.css" />
<title>Sign in & Sign up Form</title>
</head>
<script src="https://kit.fontawesome.com/64d58efce2.js" crossorigin="anonymous"></script>
<body>
<div >
<div >
<!---------------------------- this is for login form ------------------------------------->
<div >
<form action="Logsuccess" method="post">
<h2 >Log-in</h2>
<div >
<i ></i>
<input type="text" name="username" placeholder="Username" id="luser" />
</div>
<br>
<div >
<i ></i>
<input type="password" name="password" placeholder="Password" id="lpass" />
</div>
<br>
<input type="button" value="Login" onclick="Register('login')" />
<p >Or Sign in with social platforms</p>
<div >
<a href="#" > <i > </i> </a>
<a href="#" > <i > </i> </a>
<a href="#" > <i > </i> </a>
<a href="#" > <i ></i> </a>
</div>
</form>
<!---------------------------- this is for signup form ------------------------------------->
<!-- <form action="#" method="post" onsubmit="return validation()"> -->
<!-- <form action="RegSuccess" method="post">-->
<form action="RegConfirm.php" method="post" o>
<h2 >Sign up</h2>
<div >
<i ></i>
<input type="text" name="Username" placeholder="Username" id="suser" />
</div>
<br>
<div >
<i ></i>
<input type="email" name="email" placeholder="Email" id="semailAddress" />
</div>
<br>
<div >
<i ></i>
<input type="password" name="Password" placeholder="Password" id="spass" />
</div>
<br>
<input type="button" value="Sign up" onclick="Register('signup')" />
</form>
</div>
</div>
<!---------------------------- this is in login page for asking to signup------------------------------------->
<div >
<div >
<div >
<h3>Don't Have An Account ?</h3>
<p>
Your are always welcome to join us!!!
</p>
<button id="sign-up-btn"> Sign up </button>
</div>
<img src="img/log.svg" alt="" />
</div>
<!---------------------------- this is in signup page for asking to login------------------------------------->
<div >
<div >
<h3>Are You One of Us ?</h3>
<p>
Let's Log In Then !!!
</p>
<button id="sign-in-btn"> Log in </button>
</div>
<img src="img/register.svg" 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 Register(formType) {
return validation(formType);
}
function validation(formType) {
if (formType == "login") {
var user = document.getElementById("luser").value;
var pass = document.getElementById("lpass").value;
} else {
var user = document.getElementById("suser").value;
var pass = document.getElementById("spass").value;
var emailAddress = document.getElementById("semailAddress").value;
}
var errors = [];
// var user = document.getElementById('suser').value;
// var emailAddress = document.getElementById('semailAddress').value;
// var pass = document.getElementById('spass').value;
console.log(user)
if (user == null || user == "") {
errors.push("Username is required");
// return false;
} else if (user.length < 3 || user.length > 30) {
errors.push("Username must be at least 3 characters long.");
// return false;
}
if (formType == "signup") {
console.log(emailAddress)
if (emailAddress == null || emailAddress == "") {
errors.push("Email cannot be empty");
//return false;
} else if (emailAddress.indexOf('@') <= 0) {
errors.push(" @ symbol is on invalid position");
} else {
document.getElementById('semailAddress').innerHTMl = "";
}
}
console.log(pass)
if (pass == null || pass == "") {
errors.push("Password cannot be empty");
// return false;
} else if (pass.length <= 4 || pass.length >= 20) {
errors.push("Password must be at least 4 characters long.");
// return false;
} else {
document.getElementById('spass').innerHTMl = "";
}
if (errors.length > 0) {
alert(errors.join("\n"));
return false;
} else {
return true;
}
}
//---------------------------- end of javascript for validation -------------------------------------//
</script>
</body>
</html>