Submitted almost 2 years ago

Interactive multi-step introduction (HTML, CSS, Vanilla JS)

Konstantin Christ•450

@Konstantinchrist

Preview site View code

This is a solution for...Multi-step form

HTML
CSS
JS

4advanced

Design comparison

SolutionDesign

Solution retrospective

Hi guys, so here is my new project I left out the monthly/yearly thing on this project. I highly appreciate it if someone looked into my code, because I may have made several heavy mistakes! Also please let me know if there's better solutions for any functions etc. I don't understand why my hover effect does not work on the option elements. Thanks for the support!

Thanks a lot, Konstantin

Community feedback

Kent O'Sullivan•1,870
@12KentosPosted almost 2 years ago
Looks good, I just noticed as I was going through the different steps, that the phone input was a little frustrating. The validation you have seems to check for two different formats, (Correct me if I'm wrong) (123) 456-7890 or 123-456-7890. However someone that wouldn't be able to look into the code, wouldn't be able to figure this out, and would have to keep guessing how you wanted it formatted. I would suggest either modifying the code to the following.

/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im

Or when they enter it in incorrectly give them an example of how you would like it to be done. Here's a link to where I found the code snippet above.

stackoverflow

Hope that helps!
Marked as helpful
0
Konstantin Christ•450
@KonstantinchristPosted almost 2 years ago
@12Kentos 123 456 7890 would also be valid, but thanks for your suggestion!
1

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