Base Apparel email form using match()

Community feedback

• 

  Gassai Hamza•290

  @GHamza-DevPosted about 3 years ago

  Hi Phil 👋

  First, keep it up!!! I really liked your solution.

  • For the first issue it happens because you grabbed the input value just once and what happened is the function called each time you click the button but it uses the old input value.

  To fix this problem you should grab the input value each time you want to make a check

  An appropriate solution would be like:

  //....
  const email = document.getElementById("email"); 
  // Notice that I selected the element and kept it (without getting the value from it).
  //....
  //......
  //....
  let inputValue = " ";  // simple declaration
  
  function validation() {
  
          inputValue = email.value; // I get the value of the input each time I call the function
  
          if (inputValue.match(pattern))  // Or simply: if (email.value.match(pattern)) 
          {
              form.classList.add("valid");
              form.classList.remove("invalid");
              //.....
              //.......... the rest of your code 
  

  Thus should work 100%!! and if you need more clarification do not hesitate to ask for it.

  Final tip: There is also a way of validating inputs using CSS you may want to learn about it If so search for validity pseudo-selectors (:valid & :invalid pseudo-selectors)

  HAPPY CODDING!!

  Marked as helpful

  0
• 

  Phil•185

  @PhilJGPosted about 3 years ago

  Thank you Gassai for all your feedback.

  Using the blank declaration worked like a charm! This is great because I was having this issue on a personal project as well :)

  I looked up validity pseudo-selectors and it works also when the correct or incorrect is format is entered. However I still get a blue border around the input when it is clicked?

  Not sure how to adjust that but when I do I think this will be good to go.

  1