Ping Responsive Landing Page With Form Validation

Community feedback

• 

  Marzia Jalili•7,270

  @MarziaJalili

  Posted 28 days ago

  Bulletproof solution! 🎉

  🌟 A cherry on the top?

  ✅ Wouldn't it be cool if we had an event listener to remove the error message as soon as the input becomes valid? 😳

  ✅ To achieve this, we should add an input event listener on the email input field. This way, every time the user types something, it will check if the input is valid and update the UI accordingly.

  ✅ Let's code it out:

  input.addEventListener('input', () => {
    const email = input.value.trim();
  
    // Real magic here ✨ 
    if (email && regex.test(email)) {
          errorText.classList.add('hidden');
          emptyInput.classList.add('hidden');
          input.style.borderColor = 'blue';
      }
  });
  

  🎯 This will definitely make sure to check if the input becomes valid and hides the error messages immediately.

  😎😎😎

  10