Interactive card details form solution || Responsive || Mobile first

Community feedback

• Account deleted

  for your JavaScript code some of your codes are repeated but is not a lot My Recommendation for the inputs.forEach(() => {}) => create a functions per nested conditions so it will decrease the logical thinking what I mean about that is it will became more easier to read your code if you do this... example

  const containsNameInput = function (input) {
   if(input.value === ''){
                  input.parentElement.classList.add('error-empty');
                  input.parentElement.classList.remove('error-invalid');
              }else if(input.value !== '' && input.value.match(/^[0-9]+$/) !== null){
                  input.parentElement.classList.remove('error-empty');
                  input.parentElement.classList.add('error-invalid');
              }
              else{
                  input.parentElement.classList.remove('error-empty');
                  input.parentElement.classList.remove('error-invalid');
              }
  // add this function to the parent condition statement
  // So on and so fort for the others are nested condition
  }
  

  for the second question: "Modal"

  much better used this kind of way instead to loop the forms so it will check each input once the user click the submit button ("submit" handler)

  // their variables contains the value of their inputs
  const nameInput = document.querySelector(".name-input").value;
  const numberInput = document.querySelector(".name-input").value.length;
  const monthInput =  document.querySelector(".month-input").value;
  const yearInput = document.querySelector(".year-input").value;
  const cvcInput = document.querySelector(".cvc-input").value.length;
  
  // second operand of condition is not 100% accurate is just an example
   if(nameInput === 'name' &&
       numberInput === 16    &&
       monthInput === "month" &&
       yearInput === "year" &&
       cvcInput === 4) {
           modal.style.display = 'flex or block";  
  }  else {
   // you can create a code here if you want to throw an error
   // in the webpage
  }
  

  Marked as helpful

  2

  ---

  

  ROCKY BARUA•1,090

  @DrougnovPosted about 2 years ago

  Thank you so much @okayda. I've transformed the conditions into functions.

  But I'm still stuck with the modal display :(

  1

  Account deleted

  @Drougnov The reason for getting submitted the cvc input and come out the modal even though the others inputs are empty

  • the input of the cvc are stored in the last of array. if you console.log the inputs variable you declared in the global scope you will see.

  • since the cvc are in the last of the array. if the cvc input is not empty so the cvc input have a value inside and for the final loop iteration (i),,, of the forEach you used in the inputs the condition you declared in the if statement (modal) it will not be met since the input of cvc have a value inside so the else statement will be executed and the modal will be display in the webpage

  To solve your problem and I already try this to your github repo it works

  form.addEventListener("submit", (e) => {
  
  // The purpose of this count Variable
  // it will increment this variable if there is a
  // empty or invalid input.
  let countInValid = 0;
  
  

  below, add this to your error conditions for modal

  // just ignored this condition. only for location purposes
  if (
  input.parentElement.classList.contains("error-empty") ||
  input.parentElement.classList.contains("error-invalid") ||
  input.parentElement.parentElement.
  classList.
  contains("error-invalid") ||
  input.parentElement.parentElement
  .classList.contains("error-empty")
  ) {
  
  // if the condition is met since the input have a error
  // it will  increment this
  countInValid += 1;
  
  modal.style.display = "none";
  } else {
  
  // this if & else statement is desgined for the "cvc input"
  // for the "if" if there is no error counted
      the modal will be displayed
  // for the "else", no modal will be displayed
  if (countInValid === 0) modal.style.display = "flex";
  else return;
  }
  

  Marked as helpful

  1

  

  ROCKY BARUA•1,090

  @DrougnovPosted about 2 years ago

  Thanks, @okayda for your valuable time and suggestions. It helped me out a lot.

  0