How to I add error messages as per the error in HTML

November 22, 2021

Currently the Error message that is displayed is common for all the errors . But i want to display different error messages for different errors. Like for Invalid password it should display invalid password. Whereas for 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>

Can someone Please tell me How should i do that. I tried adding another message at and making the necessary changes in javascript, but it would display both messages 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;
        }
    })

Any help would be appreciated .

>Solution :

Test each and push to an error array. If the array has zero length the tests passed

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;
  const msg = []
  if (username !== "admin") msg.push("username")
  if (password !== "password") msg.push("password")
  if (msg.length === 0) {
    alert("You have successfully logged in.");
    location.reload();
    return;
  }
  signupErrorMsg.textContent = "Invalid " + msg.join(" and ");
  signupErrorMsg.style.opacity = 1;

})

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;
}

<main id="main-holder">
  <h1 id="signup-header"><b>Sign Up</b></h1>

  <div id="signup-error-msg-holder">
    <p id="signup-error-msg"></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>