Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

JavaScript Validation - Contact Form

Mahmood 1,070

@MahmoodHashem

Desktop design screenshot for the Contact form coding challenge

This is a solution for...

  • 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?

  • The first key thing I learned was how to style custom radio buttons and checkboxes. Rather than relying on the default browser-provided form controls, I explored ways to create my own unique visual designs for these UI elements. This involved using CSS to hide the original controls and then rebuilding them from scratch using techniques like pseudo-elements, and strategic positioning. By the end of this process, I was able to craft visually appealing and consistent custom radio buttons and checkboxes that seamlessly integrated with the overall design of the project.
  • The second major area of learning was form validation. This challenge required me to not only understand the HTML5 validation API, but also dive into the JavaScript validation API. Using the HTML5 validation features, such as the required, minlength and type attributes, I was able to declaratively define validation rules directly in the markup. However, I also explored the programmatic validation capabilities of JavaScript, which allowed me to dynamically check form field values, trigger validation checks, display error messages, and update the UI accordingly. Mastering both the declarative and programmatic approaches to form validation has equipped me with a well-rounded skill set for handling user input reliably and effectively.

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

Any feedback is appreciated

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

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