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 .
Advertisement
Answer
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>