0

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

1 Answer 1

0

The problem appears here:

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

Change it to:

    if (password.length < 10 || password.length > 20) {
        errors.push("passwordLength");
        passwordInput.classList.add("error");
    }
    if (!password.match(/[a-z]/)) {
        errors.push("passwordLowercase");
        passwordInput.classList.add("error");
    }
    if (!password.match(/[A-Z]/)) {
        errors.push("passwordUppercase");
        passwordInput.classList.add("error");
    }
    if (!password.match(/\d/)) {
        errors.push("passwordDigit");
        passwordInput.classList.add("error");
    }
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.