How to make this input form-validation check right?

Question

I've got assignment to make this form in js/jquery. The code looks good on error side of things (coloring red forms and throwing errors) but it should color the input form in green for correct username and password, and alternately so( if one form is good it colors green but other goes red etc.) i cant figure out why it doesn't work for correct inputs. Also we gotta put icons with checkmark and x(wrong) respectively in input forms on the right side (no clue how i do that they mentioned some icon libraries online in class but never showed us how to use them).

I tried correcting it for a long time but can't see a culprit, tried using AI too yes i'm that desperate and tired.

document.getElementById("login-form").addEventListener("submit", function (event) {
            event.preventDefault(); // Prevent form submission

            // Reset previous validation styles
            document.getElementById("username").classList.remove("invalid");
            document.getElementById("password").classList.remove("invalid");
            document.getElementById("username").classList.remove("valid");
            document.getElementById("password").classList.remove("valid");
            document.getElementById("error-messages").innerHTML = "";
            document.getElementById("username-error").textContent = "";
            document.getElementById("password-error").textContent = "";

            // Get input values
            var username = document.getElementById("username").value.trim();
            var password = document.getElementById("password").value.trim();

            var errors = [];

            // Validate username and password
            if (username === "") {
                document.getElementById("username").classList.add("invalid");
                document.getElementById("username-error").textContent = "Please, enter username";
                errors.push("Username is required.");
            } else if (username !== "new_user") {
                document.getElementById("username").classList.add("invalid");
                document.getElementById("username-error").textContent = "Please, enter valid username";
                errors.push("Invalid username.");
            }

            if (password === "") {
                document.getElementById("password").classList.add("invalid");
                document.getElementById("password-error").textContent = "Please, enter password";
                errors.push("Password is required.");
            } else if (password !== "123456789") {
                document.getElementById("password").classList.add("invalid");
                document.getElementById("password-error").textContent = "Please, enter valid password";
                errors.push("Invalid password.");
            }

            // Display error messages
            if (errors.length > 0) {
                var errorMessageHTML = "<ul class='error-message'>";
                errors.forEach(function (error) {
                    errorMessageHTML += "<li>" + error + "</li>";
                });
                errorMessageHTML += "</ul>";
                document.getElementById("error-messages").innerHTML = errorMessageHTML;
            } else {
                // Successful login
                document.getElementById("username").classList.add("valid");
                document.getElementById("password").classList.add("valid");
                document.getElementById("error-messages").innerHTML = "<p class='success-message'>Successful login!</p>";
            }
        });

body {
    box-sizing: border-box;
    font-family: sans-serif;
}

#login-container {
    width: 460px;
    margin: 0 auto;
}

form label,
form input {
    width: 100%;
    box-sizing: border-box;
}

form input {
    padding: 8px;
}

form label {
    font-weight: bold;
}

form div {
    margin: 16px 0px;
}

.invalid {
    border: 2px solid red;
}

.valid {
    border: 2px solid green;
}

.error-message {
    color: red;
    margin-top: 8px;
}

.success-message {
    color: green;
    margin-top: 8px;
}

<div id="login-container">

    <form id="login-form">
        <div>
            <label for="username">Username:</label>
            <input id="username" type="text">
            <span id="username-error" class="error-message"></span>
        </div>

        <div>
            <label for="password">Password:</label>
            <input id="password" type="password">
            <span id="password-error" class="error-message"></span>
        </div>

        <input type="submit" value="Login">
    </form>

    <div id="error-messages"></div>
</div>

Answer 1

I will answer one question since you should only ask one at a time

Color the input form in green for correct username and password

Use classList.toggle and remove setting the valid class from the end of the script:

  // Validate username
    document.getElementById("username").classList.toggle("invalid",username === "" || username !== "new_user");  
    document.getElementById("username").classList.toggle("valid",username === "new_user");  
  if (username === "") {
    document.getElementById("username-error").textContent = "Please, enter username";
    errors.push("Username is required.");
  } else if (username !== "new_user") {
    document.getElementById("username-error").textContent = "Please, enter valid username";
    errors.push("Invalid username.");
  }

Same for password.

document.getElementById("login-form").addEventListener("submit", function(event) {
  event.preventDefault(); // Prevent form submission

  // Reset previous validation styles
  document.getElementById("username").classList.remove("invalid");
  document.getElementById("password").classList.remove("invalid");
  document.getElementById("username").classList.remove("valid");
  document.getElementById("password").classList.remove("valid");
  document.getElementById("error-messages").innerHTML = "";
  document.getElementById("username-error").textContent = "";
  document.getElementById("password-error").textContent = "";

  // Get input values
  var username = document.getElementById("username").value.trim();
  var password = document.getElementById("password").value.trim();

  var errors = [];

  // Validate username and password
  document.getElementById("username").classList.toggle("invalid", username === "" || username !== "new_user");
  document.getElementById("username").classList.toggle("valid", username === "new_user");
  if (username === "") {
    document.getElementById("username-error").textContent = "Please, enter username";
    errors.push("Username is required.");
  } else if (username !== "new_user") {
    document.getElementById("username-error").textContent = "Please, enter valid username";
    errors.push("Invalid username.");
  }

  document.getElementById("password").classList.toggle("invalid", password === "" || password !== "123456789");
  document.getElementById("password").classList.toggle("valid", password === "123456789");
  if (password === "") {
    document.getElementById("password-error").textContent = "Please, enter password";
    errors.push("Password is required.");
  } else if (password !== "123456789") {
    document.getElementById("password-error").textContent = "Please, enter valid password";
    errors.push("Invalid password.");
  }

  // Display error messages
  if (errors.length > 0) {
    var errorMessageHTML = ['<ul class="error-message">', ...errors.map(error => `<li>${error}</li>`), '</ul>'];
    document.getElementById("error-messages").innerHTML = errorMessageHTML.join('');
  } else {
    // Successful login
    document.getElementById("error-messages").innerHTML = "<p class='success-message'>Successful login!</p>";
  }
});

body {
  box-sizing: border-box;
  font-family: sans-serif;
}

#login-container {
  width: 460px;
  margin: 0 auto;
}

form label,
form input {
  width: 100%;
  box-sizing: border-box;
}

form input {
  padding: 8px;
}

form label {
  font-weight: bold;
}

form div {
  margin: 16px 0px;
}

.invalid {
  border: 2px solid red;
}

.valid {
  border: 2px solid green;
}

.error-message {
  color: red;
  margin-top: 8px;
}

.success-message {
  color: green;
  margin-top: 8px;
}

<div id="login-container">

  <form id="login-form">
    <div>
      <label for="username">Username:</label>
      <input id="username" type="text">
      <span id="username-error" class="error-message"></span>
    </div>

    <div>
      <label for="password">Password:</label>
      <input id="password" type="password">
      <span id="password-error" class="error-message"></span>
    </div>

    <input type="submit" value="Login">
  </form>

  <div id="error-messages"></div>
</div>

Answer 2

Data that controls business logic such as lookup tables also need to be in source control. Developers need a way to easily create local databases. Shared database should only be updated via a build server.1