Skip to content
Submitted 9 months ago

Validating a Contact Form in Next.js with Tailwind, TypeScript

next, tailwind-css, typescript, material-ui
Babatunde•60
@tundeloper
A solution to the Contact form challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

getting the form to pass validations smoothly

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

I'm proud of how well I integrated accessibility, with keyboard navigation, screen reader support, and responsive design. Next time, I'd focus on refining the visual design, exploring advanced validation patterns, and optimizing the success message. I'd also consider using a testing library to automate accessibility checks.

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

Are there any specific areas of your project you'd like help with, such as optimizing accessibility, improving validation logic, or enhancing the design with Tailwind CSS? Or maybe you're looking for feedback on performance, code organization, or handling state management more efficiently? Let me know!

Code

Please log in to post a comment

Log in

Community feedback

  • Grace•32,130
    @grace-snow

    I'm afraid this has some quite serious accessibility problems caused mostly by the HTML in the form.

    • Inputs must always be labelled.
    • Inputs that collect personal data must have appropriate autocomplete attributes.
    • Required fields must use the required attribute.
    • The fieldsets under each input must be removed.
    • Error messages must be announced to screen readers and be programmatically linked to their input. The best way to do this is have an element wrapping each error that is always present in the DOM (not display none or visibility hidden etc). This needs a unique id and an aria-live attribute. Then the input needs aria-describedby pointing to that error wrapper ID. When an error is present you either unhide the inner contents of that error or dynamically populate it's inner content.
    • The query type must be correctly structured with a fieldset, legend and labelled inputs.

    This is also missing the success notification that's in the design, which will have its own accessibility requirements.

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