interactive-card-details-form-main

Hello, Technically, the form works -- it submits as long as all the fields are completed. What is missing in the code is the logic to check that the information entered in the fields are in the accurate format. If the user input is incorrect, then the form should not submit. Users should get error messages about how the data should be entered.

For example, in the current code, the card number, month, year and cvc fields are allowing/accepting alphabetical letters. This should be set up/refactored so that only numeral values (0-9) are accepted.

You need to update the logic that checks the fields to also include a check that the fields are getting the properly entered data.

You have to remove the errors before you check the values again, right? 🙂

confirmBtn.addEventListener("click", () => {
  cardNumberInput.classList.remove("error-border");
  cardNumberInput.nextElementSibling.innerHTML = "";
  cardOwnerInput.classList.remove("error-border");
  cardOwnerInput.nextElementSibling.innerHTML = "";
  cardExpiryMonth.classList.remove("error-border");
  cardExpiryYear.classList.remove("error-border");
  cardExpiryYear.parentElement.nextElementSibling.innerHTML = "";
  cardCVC.classList.remove("error-border");
  cardCVC.nextElementSibling.innerHTML = "";
  error = false;

  if (cardNumberInput.value === "") {
    cardNumberInput.classList.add("error-border");
    cardNumberInput.nextElementSibling.innerHTML = "Cannot be empty";
    error = true;
  }

  // other checks
}