Newsletter sing-up
This is a solution to the Newsletter sign-up form with success message challenge on Frontend Mentor.
My process
Writing the html code was quite straightforward, so I focused on the form and dialog element, styling the form and implementing a basic client-validation.
In html, I use theĀ input type="email"Ā which automatically provides a simple validation for emails. Itās not enough however, so I added a regex expression to validate email addresses:
pattern="[A-Za-z0-9._+\-]+@[A-Za-z0-9\-]+\.[a-z]{2,6}"
TheĀ dialogĀ element opens by javascript when the email is submitted but closes automatically. The dismiss button is in a form tag with theĀ method="dialog"
In css, I style the invalid inputs with the selectorĀ :invalid. Every empty input is automatically invalid. To change that behavior I added aĀ :focusĀ state, like this: input:focus:invalid{}
The error message is added with theĀ ::afterĀ pseudo-selector when the htmlĀ :has()Ā an invalid element.
The javascript isnāt something exteme. The function validate checks if the input is valid or not. Then opens the dialog. TheĀ .preventDefault()Ā function prevents the form from submitting. We just need to open the dialog. In a real-world example, we would send manually the data after opening the modal.