Mobile First Form with sign up using Flexbox

Community feedback

• 

  Fazza Razaq Amiarso•2,340

  @fazzaamiarsoPosted about 2 years ago

  Hi Rom! Clean Solution!

  Here is my refactor, I just abstracted the dom manipulation to a function

  function checkInputError(errorCondition, inputField, errorText){
      const toggleClass = errorCondition ? inputField.classList.add : inputField.classList.remove;
  
      toggleClass("active");
      errorText.style.display = errorCondition ? 'block' : "none";
  }
      input[0].addEventListener('input', (e) => {
          const value = e.target.value;
          checkInputError(value.length <= 0, input[0], errorTxt[0]); 
      });
  
      input[1].addEventListener('input', (e) => {
          const value = e.target.value;
          checkInputError(value.length <= 0, input[1], errorTxt[1]); 
      });
  
      input[2].addEventListener('input', (e) => {
          const value = e.target.value;
          checkInputError(!validateEmail(value), input[2], errorTxt[2]); 
       })
  
      input[3].addEventListener('input', (e) => {
          const value = e.target.value;
          checkInputError(value.length <= 0, input[3], errorTxt[3]); 
      });
  
  

  I hope it helps! Cheers!

  Marked as helpful

  0