The expected number of <li> tags (error messages) should be six, but I am only getting three. Does anyone have a clue about how I can fix my code? Here is what I am basically trying to do:
Perform the following form validations in the order provided and display all error messages that apply:
Ensure a full name with a length greater than or equal to 1 was provided
- Otherwise, display "Missing full name."
Ensure that an email address was provided and that the email address matches the regular expression:
/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,5}$/- Otherwise, display "Invalid or missing email address."
Ensure the password has 10 to 20 characters
- Otherwise, display "Password must be between 10 and 20 characters."
Ensure the password contains at least one lowercase character (use a regular expression)
- Otherwise, display "Password must contain at least one lowercase character."
Ensure the password contains at least one uppercase character (use a regular expression)
- Otherwise, display "Password must contain at least one uppercase character."
Ensure the password contains at least one digit (use a regular expression)
- Otherwise, display "Password must contain at least one digit."
Ensure the password and confirmation password match
- Otherwise, display "Password and confirmation password don't match."
"use strict";
function checkForm() {
const fullNameInput = document.getElementById("fullName");
const emailInput = document.getElementById("email");
const passwordInput = document.getElementById("password");
const passwordConfirmInput = document.getElementById("passwordConfirm");
const formErrorsDiv = document.getElementById("formErrors");
// Reset errors and remove classes
formErrorsDiv.innerHTML = "";
fullNameInput.classList.remove("error");
emailInput.classList.remove("error");
passwordInput.classList.remove("error");
passwordConfirmInput.classList.remove("error");
// Error messages in <li> tags
const errorMessages = {
fullName: "Missing full name.",
email: "Invalid or missing email address.",
passwordLength: "Password must be between 10 and 20 characters.",
passwordLowercase: "Password must contain at least one lowercase character.",
passwordUppercase: "Password must contain at least one uppercase character.",
passwordDigit: "Password must contain at least one digit.",
passwordConfirm: "Password and confirmation password don't match."
};
const errors = [];
// Check full name
if (fullNameInput.value.trim().length === 0) {
errors.push("fullName");
fullNameInput.classList.add("error");
}
// Check email
const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,5}$/;
if (!emailRegex.test(emailInput.value.trim())) {
errors.push("email");
emailInput.classList.add("error");
}
// Check password
const password = passwordInput.value;
const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{10,20}$/;
if (password.length < 10 || password.length > 20) {
errors.push("passwordLength");
passwordInput.classList.add("error");
} else if (!password.match(/[a-z]/)) {
errors.push("passwordLowercase");
passwordInput.classList.add("error");
} else if (!password.match(/[A-Z]/)) {
errors.push("passwordUppercase");
passwordInput.classList.add("error");
} else if (!password.match(/\d/)) {
errors.push("passwordDigit");
passwordInput.classList.add("error");
}
// Check password confirmation
if (passwordConfirmInput.value !== password) {
errors.push("passwordConfirm");
passwordConfirmInput.classList.add("error");
}
if (errors.length > 0) {
// Display error messages
const errorList = document.createElement("ul");
errors.forEach(error => {
const errorMessage = document.createElement("li");
errorMessage.innerText = errorMessages[error];
errorList.appendChild(errorMessage);
});
formErrorsDiv.appendChild(errorList);
formErrorsDiv.classList.remove("hide");
} else {
formErrorsDiv.classList.add("hide");
}
}
document.getElementById("submit").addEventListener("click", function(event) {
checkForm();
// Prevent default form action. DO NOT REMOVE THIS LINE
event.preventDefault();
});