Intro component with Signup form

Hi Elroy,

Great to see another solution from you, nice one!

I found this one a lot trickier than it looked. Florin's JavaScript Client-side Form Validation - YT video is an invaluable resource for this one.

Happy coding!

I really like your solution, especially the animations (great idea). From a design perspective, I like it pretty much, even if it is not exactly like the template.

Regarding the validation, I would do it differently (but you have to decide yourself, if my solution can help you) Maybe some ideas work for you as well (The ideas are copied from my solution, which I didn't submit^^) I really think you could simplify your html/js with a little different approach. And then not only one error message, would be shown on submit:

Use real submit input (advantage, click listener would also be activated on submit with keyboard)

<input class = "..." type = "submit" value = "Claim your free trial">

I added a event listener, which adds a "submitted" class to the form (helps to react on form submit in css)

    document.querySelectorAll("input[type='submit']").forEach(input => {
        input.addEventListener("click", () => {
            input.form.classList.add("submitted");
        });
    });

Similar I added classes, when the inputs are changed or when validation is invalid. You can even put different invalid classes depending on the validation error by using input.validity in JS (I used the <input type="email" ...> default validation, here your solution might be better):

    document.querySelectorAll("input").forEach(input => {
        input.addEventListener("input", () => {
            refreshInputInvalidClasses(input);
        });
        input.addEventListener("invalid", () => {
            refreshInputInvalidClasses(input);
        });
    });

    function refreshInputInvalidClasses(input) {
        if (input.validity.valueMissing) {
            input.parentElement.classList.add("invalid--required");
        } else {
            input.parentElement.classList.remove("invalid--required");
        }

        if (input.validity.typeMismatch) {
            input.parentElement.classList.add("invalid--type-mismatch");
        } else {
            input.parentElement.classList.remove("invalid--type-mismatch");
        }
    }

And then I added the error messages as custom html attributes, which can also be read in css/scss. For example for the email:

                <div class = "input-container"
                     data-error-required  = "Email Address cannot be empty"
                     data-error-type-mismatch  = "Looks like this is not an email">
                    <input class = "input-field"
                           name = "email"
                           type = "email"
                           aria-label = "Email Address"
                           placeholder = "Email Address"
                           required>
                </div>

When using pseudo elements, you even don't need the validation messages as separate divs/spans, but can read them with attr in css/scss:

form.submitted .input-container.invalid--required::after {
    content: attr(data-error-required);
}

form.submitted .input-container.invalid--type-mismatch::after {
    content: attr(data-error-type-mismatch);
}

The error icon can be set as background-image, which may be simpler:

form.submitted .input-container .input-field:invalid {
    ...
    background-image: url("images/icon-error.svg");
    background-repeat: no-repeat;
    background-position-x: calc(100% - 24px);
    background-position-y: calc(50%);
}