Skip to content
Submitted 6 months ago

Form validation using regex

Michael Degorre•160
@MDEGORRE
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Newsletter sign-up form with success message
  • HTML
  • CSS
  • JS
2junior

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-IPosted 6 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 =)

    0

Please log in to post a comment

Log in with GitHub

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