Submitted 3 months ago

Form validation using regex

Michael Degorre• 110

@MDEGORRE

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Newsletter sign-up form with success message

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Searched a regex pattern for the email. Seems to work perfectly.
The design is responsive.
I try to not put everything into the same function as i was a bit lost at some point. 😊

What challenges did you encounter, and how did you overcome them?

Initially the input width was too wide with 100 %. Fixed it with border-box.
I did not know how to disable form validation by browser. Added the novalidate property.

What specific areas of your project would you like help with?

I have an issue with the list: the text is not properly aligned to the marker. I tried a lot of things with text-indent but still no solution.

Community feedback

Alex• 3,130

@Alex-Archer-I

Posted 3 months ago

Hi!

It's a very few ways to stylize marker element, so I guess there aren't any easy ways to align text and marker. Maybe you could try to change width and height of the image directly in the svg file. Or you can put text into the p tag and try to figure something with it. For example, padding-bottom or positioning.

I solved that by setting display of li to flex and putting img and p inside it. But I have to admit that markers are more elegant decision =)

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord