In the current setup, a common error message is displayed for all errors. However, I want to customize the error messages based on the specific type of error. For example, if the password is invalid, it should display "invalid password", and for an invalid username, it should display "invalid username."
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
display: grid;
justify-items: center;
align-items: center;
background-color: #d39090;
}
#main-holder {
width: 50%;
height: 70%;
display: grid;
justify-items: center;
align-items: center;
background-color: white;
border-radius: 7px;
box-shadow: 0px 0px 5px 2px black;
}
#signup-error-msg-holder {
width: 100%;
height: 100%;
display: grid;
justify-items: center;
align-items: center;
}
#signup-error-msg {
width: 23%;
text-align: center;
margin: 0;
padding: 5px;
font-size: 16px;
font-weight: bold;
color: #8a0000;
border: 1px solid #8a0000;
background-color: #e58f8f;
opacity: 0;
}
#error-msg-second-line {
display: block;
}
#signup-form {
align-self: flex-start;
display: grid;
justify-items: center;
align-items: center;
}
.signup-form-field::placeholder {
color: #2e4136;
}
.signup-form-field {
border: none;
border-bottom: 1px solid #755ddf;
margin-bottom: 10px;
border-radius: 3px;
outline: none;
padding: 0px 0px 5px 5px;
}
#signup-form-submit {
width: 100%;
margin-top: 20px;
padding: 10px;
border: none;
border-radius: 5px;
color: white;
font-weight: bold;
background-color: #43509b;
cursor: pointer;
outline: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up Page</title>
<link rel="stylesheet" href="interlog.css">
</head>
<body>
<main id="main-holder">
<h1 id="signup-header"><b>Sign Up</b></h1>
<div id="signup-error-msg-holder">
<p id="signup-error-msg">Invalid username <span id="error-msg-second-line">and/or password</span></p>
</div>
<form id="signup-form">
<input type="text" name="username" id="username-field" class="signup-form-field" placeholder="Username">
<input type="password" name="password" id="password-field" class="signup-form-field" placeholder="Password">
<input type="submit" value="submit" id="signup-form-submit">
</form>
</main>
<script>
const signupForm = document.getElementById("signup-form");
const signupButton = document.getElementById("signup-form-submit");
const signupErrorMsg = document.getElementById("signup-error-msg");
signupButton.addEventListener("click", (e) => {
e.preventDefault();
const username = signupForm.username.value;
const password = signupForm.password.value;
if (username === "admin" && password === "password") {
alert("You have successfully logged in.");
location.reload();
} else {
signupErrorMsg.style.opacity = 1;
}
})
</script>
</body>
</html>I'm looking for guidance on how to achieve this customization. I attempted to add another message at signup-error-msg-holder and made changes in the JavaScript, but both messages were displaying simultaneously.
`<div id="signup-error-msg-holder">
<p id="signup-error-msg1">Invalid password</p>
</div>
<div id="signup-error-msg-holder">
<p id="signup-error-msg2">Invalid username </p>
</div>
`
const signupErrorMsg1 = document.getElementById("signup-error-msg1");
const signupErrorMsg2 = document.getElementById("signup-error-msg2");
signupButton.addEventListener("click", (e) => {
e.preventDefault();
const username = signupForm.username.value;
const password = signupForm.password.value;
if (username === "admin" && password === "password") {
alert("You have successfully logged in.");
location.reload();
} else if (username === "admin" && password !== "password") {
signupErrorMsg1.style.opacity = 1;
} else if (username !== "admin" && password === "password") {
signupErrorMsg2.style.opacity = 1;
}
})
`
Your assistance would be greatly appreciated.