interactive-card-details-form-main

Community feedback

• 

  HelloTechTinu•670

  @tinuolaPosted 9 months ago

  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.

  Marked as helpful

  0
• 

  P

  markus•2,250

  @markuslewinPosted 9 months ago

  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
  }
  

  Marked as helpful

  0

  ---

  

  OsatohanmwenT•760

  @OsatohanmwenTPosted 9 months ago

  @markuslewin thanks it also has another problem the error page is working fine but after test the error page if i fill the form correctly, the details aren't displayed

  0

  

  P

  markus•2,250

  @markuslewinPosted 9 months ago

  @OsatohanmwenT Hmm, I can only see the old code on GitHub. I think the error = false; in my comment above should help with that!

  Marked as helpful

  0

  

  OsatohanmwenT•760

  @OsatohanmwenTPosted 9 months ago

  @markuslewin thanks

  1