Skip to content
Submitted 3 months ago

Contact Form

accessibility, pure-css, van-js
Muhamad Rukhul Kirom•380
@rukhulkirom
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?

I’m really proud of how the form validation is handled in this project. The JavaScript ensures a smooth user experience by providing real-time validation feedback, and the error handling feels intuitive. The toast notification for successful submissions adds a nice touch of interactivity, making the form feel polished and professional. Additionally, the UI design is clean and responsive, ensuring that it works well on different screen sizes.

One improvement I would make is refactoring the validation logic to be more modular and reusable. Right now, the validateGroup function covers multiple input types, but breaking it into smaller functions for each type could make the code cleaner and easier to maintain. I would also consider using a form library or built-in HTML5 validation features for better scalability.

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

Challenge:

Initially, managing validation for different input types (text, email, radio, checkbox, textarea) in a single function became messy. Some errors didn’t display correctly, and real-time validation wasn’t working smoothly.

Solution:

I structured the validation logic to handle each input type separately within the validateGroup function. I also implemented event listeners (click and blur) to provide immediate feedback when users interact with or leave a field.

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

  1. Is my validation logic structured efficiently, or is there a better way to organize it?

  2. Would breaking down validateGroup into separate functions for each input type improve readability and maintainability?

  3. Are there additional ways to improve accessibility, particularly for screen reader users?

  4. Are there any optimizations I can apply to improve form performance, especially for handling validation?

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Aydan•680
    @AydanKara

    Hi @rukhulkirom

    I will try to answer some of your questions.

    1. Validation Logic Structure & 2. Breaking Down validateGroup

    • Your validation logic is mostly clear but could be structured more efficiently. Instead of a switch statement inside validateGroup, consider breaking it down into separate functions for different input types.

    Why?

    • Breaking down validateGroup into separate functions improves readability and maintainability.
    • Each function handles one responsibility (Single Responsibility Principle).
    • Easier to extend if more validation types are added later.

    ✅ Try to create for each case seperate function:

    • validateRadio
    • validateCheckbox
    • validateEmail
    • validateText

    3. Accessibility Improvements

    Your form is already quite accessible. To make it even more accessible you can wrap the radio inputs in a fieldset and use a legend. This gives better context to screen readers.

    These tutorials from W3C Web Accessibility Initiative (WAI) provide best-practice guidance on implementing accessibility in different situations.

    As a final note, I can say your code is well-structured, functional, and user-friendly. Good use of CSS classes to handle errors and localStorage usage for toast messages is a nice touch!

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