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).
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>
