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!!
