<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Assignment 2 - Website Building</title>
<style>
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;
}
</style>
<script src="https://kit.fontawesome.com/dde5f4aaa2.js" crossorigin="anonymous"></script>
</head>
<body>
<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>
<i class="fa-solid fa-check icon" style="color: #008d63;"></i>
<i class="fa-solid fa-exclamation icon" style="color: #ed0202;display:none;"></i>
</div>
<div>
<label for="password">Password:</label>
<input id="password" type="password">
<span id="password-error" class="error-message"></span>
<i class="fa-solid fa-check icon" style="color: #008d63;"></i>
<i class="fa-solid fa-exclamation icon" style="color: #ed0202;display:none;"></i>
</div>
<input type="submit" value="Login">
</form>
<div id="error-messages"></div>
</div>
<script>
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.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>";
}
}
})
</script>
</body>
</html>
What i need: So basically i need forms to show checkmark and x icons respectively depending if form's input is correct/incorrect. Those icons need to be in form field on the right side, i managed to find out how to get them in structure but i dont know how to put them inside forms and make them hidden while forms are without input.
What i tried: tried using positions from css but couldnt manage to get it right