Building Enterprise React Contact Form with Zod & CSS Modules
Learn how to build a robust contact form in ReactJS using Zod for validation, react-hook-form for state management, and CSS Modules.
Stock photo for illustration only, not from the actual event
- Input validation is a non-negotiable step to protect websites from security vulnerabilities.
- Build user interface components using ReactJS and CSS Modules.
- Integrate Zod with react-hook-form using @hookform/resolvers for seamless form handling.
- Enforce strict string constraints and length limits, such as 10 to 1,000 characters for message fields.
Forms serve as the backbone of user inputs and interactions across websites. However, developers follow a golden rule: never trust user input. Relying too much on unvalidated user input exposes web applications to security risks, making input validation an essential practice to maintain stability and security.
In this article, we explore how to build a clean contact form using ReactJS and CSS Modules while utilizing Zod for robust schema validation and error handling.
Before following this tutorial, ensure your environment is ready and open your terminal to set up a new project using Vite and install the required dependencies:
- npm create vite@latest zod-form-validation -- --template react
- npm install zod react-hook-form @hookform/resolvers
- npm run dev
Once all dependencies are successfully installed, the development server runs by default at http://localhost:5173/. Developers should properly organize their project directory structure before writing the Zod validation schemas.
Stock photo for illustration only, not from the actual event
When defining a Zod object, import z as a named export from zod and apply validation rules based on specific field requirements. For instance, combining string and email methods with min and max constraints ensures that message inputs strictly accept text between 10 and 1,000 characters. If these validation limits are violated, Zod throws predefined custom error messages.
In this tutorial, Zod operates strictly on the client-side level. Developers must remember that client-side data can never be fully trusted. If form data is transmitted to a backend server, corresponding server-side validation rules must be implemented. Although the same Zod schema can be utilized on the server, additional configuration is required.
This architectural separation ensures that security checks happen at multiple layers of the web application.
Next, inside the components directory, create ContactForm.jsx and ContactForm.module.css. We utilize useState to track two submission states—isSubmitting and submitSuccess—defaulting both to false. Standard form states are automatically managed by the useForm hook from react-hook-form, bridging seamlessly with our Zod schema via @hookform/resolvers.
Upon submission, onSubmit triggers isSubmitting to true, disabling the submit button. Inside a try block, an API call is simulated using a Promise. Upon success, form fields reset to default values and submitSuccess becomes true. If validation fails, the catch block logs errors while the finally block resets isSubmitting back to false.
Source: Dev.to
Found something wrong in this article? Report an issue with this article
Comments
Leave a Comment