Css Flexbox and Vanilla JS

Community feedback

• 

  Matias Ludueña•1,990

  @matiasluduena23Posted about 1 year ago

  Hi Darla! Congratulations you finished the challenge! It looks great!

  • Your form validation works great for this project but if you want to go one step further you can split you code to make it more reusable. The possibilities are many. You can check for you form submit, this help if you had more than one form in your website.

  1. You pass your form as a parameter to the function.
  2. get the input in the form and check for empty and validEmail( depending of the different kind of error send different message too error function).
  3. create a 'Show error' function that takes 2 parameters the message and the form.
  4. The error function get the element that display the message(the p element in your case) and insert the message. And also add a show-error class to your form. This is a different way to add the errors to elements. inserting a class in its parent.

  const formEl = document.querySelector('.form');
  
  const validateFormEmail = (form) => {
  
      form.addEventListener('submit', (e)=> {
          e.preventDefault()
          const input =  form.querySelector('input').value.trim();
  
          if(input === "") {
              showError(`Can't be blank`, form)
  
          }else if(!validateEmail(input)){
              showError(`Please check your email`, form)
  
          }else {
              showSuccess('Thanks for surscribe!!!', form)
  
          }
      })
  } 
  
  validateFormEmail(formEl) // we past the form to the function
  
  
  
  function showError(message , form) {
  
      const errorElement = form.querySelector('.error-message');
  
      errorElement.innerText = message;
      form.classList.add('show-error');
  }
  
  

  In your css file you need to tell that when the error class be in the form all your error elements are going to be visible.

  CSS

  .form.show-error  .error-message{
   display = 'block';
  }
  
  .form.show-error  .error-icon{
   display = 'block';
  }
        
  

  Here and example using typescript.

  Hope this help you!

  If you don't understand something let me know.

  Good code!

  Matias

  Marked as helpful

  0

  ---

  

  NBD•240

  @bdal90Posted about 1 year ago

  Hey Matias,

  Thank you for your invaluable advice! I am very new to JS, I'm still struggling a lot, it takes a while to digest what you wrote, but will succeed for sure!

  0