वर्तमान में प्रदर्शित होने वाला त्रुटि संदेश सभी त्रुटियों के लिए सामान्य है। लेकिन मैं अलग-अलग त्रुटियों के लिए अलग-अलग त्रुटि संदेश प्रदर्शित करना चाहता हूं। जैसे अमान्य पासवर्ड के लिए यह अमान्य पासवर्ड प्रदर्शित करना चाहिए। जबकि अमान्य उपयोगकर्ता नाम के लिए इसे अमान्य उपयोगकर्ता नाम प्रदर्शित करना चाहिए।

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>

क्या कोई मुझे बता सकता है कि मुझे यह कैसे करना चाहिए। मैंने जावास्क्रिप्ट में एक और संदेश जोड़ने और आवश्यक परिवर्तन करने का प्रयास किया, लेकिन यह दोनों संदेशों को एक साथ प्रदर्शित करेगा।

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

`

किसी भी सहायता की सराहना की जाएगी ।

1
Neha sharma 22 नवम्बर 2021, 18:06
आप अमान्य पासवर्ड की जाँच कहाँ कर रहे हैं?
 – 
user1599011
22 नवम्बर 2021, 18:10
1
विशेष रूप से पासवर्ड या उपयोगकर्ता आईडी त्रुटि दिखाना बुरा व्यवहार है। बस अमान्य उपयोगकर्ता नाम या पासवर्ड दिखाएं।
 – 
abhi patil
22 नवम्बर 2021, 18:11
लेकिन मुझे बारीकियों को प्रदर्शित करने के लिए कहा गया है @abhi patil
 – 
Neha sharma
22 नवम्बर 2021, 18:13
पहली बार में उपयोगकर्ता नाम और पासवर्ड को हार्डकोड करना बुरा है, लेकिन मुझे लगता है कि यह केवल स्व-शिक्षा उद्देश्यों के लिए है
 – 
mplungjan
22 नवम्बर 2021, 18:29

1 उत्तर

सबसे बढ़िया उत्तर

प्रत्येक का परीक्षण करें और एक त्रुटि सरणी पर पुश करें। यदि सरणी की लंबाई शून्य है, तो परीक्षण पास हो गए हैं

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>
-1
mplungjan 22 नवम्बर 2021, 18:15
डाउनवोट क्यों?
 – 
mplungjan
22 नवम्बर 2021, 18:27
मुझे नहीं पता कि उत्तर में क्या गलत है, यह बताए बिना मुझे उनमें से कुछ भी मिल गए हैं। जब आप डाउनवोट करते हैं तो लोग उत्तर में कुछ गलत होने पर इंगित करते हैं।
 – 
abhi patil
22 नवम्बर 2021, 18:37