Carpet of Fury

See README.

method="dialog"??

I put a method of "dialog" on the form because otherwise the page would reload when the form is submitted as I didn't provide an actual action URL. This is for demo purpose only. In production, this should be switched to "post" instead.

About the Invalid State

When you look at the CSS, you'll notice that I used a [data-invalid] attribute, with some help of Javascript, on the input element to indicate whether it's invalid or not instead of simply an :invalid pseudo-class. This is because if I used the pseudo-class, the input would show invalid state styles immediately when the page loads -- since, of course, the input is required. Then, those styles would disappear the moment you type in a valid email address.

We don't want that. Because, as per the terms of the challenge, form validation should take place only if there was an attempt to submit the form. And this is exactly what I did. I put an onclick to call a function named checkInput() on my button, as it's the form's only submit button. This means it would still work even if the form was submitted using the Enter key. The form would behave as if its submit button has been clicked.