This project is a React form built from scratch using only React state and custom validation logic — no external form libraries.
It demonstrates strong understanding of controlled components, dynamic validation structures, and real-world form management patterns.
- Fully controlled form inputs
- Real-time field validation
- Submit disabled until the form becomes valid
- Custom checkbox group logic
- Radio + dropdown validation
- Confirm Password auto re-check on Password updates
- Clean, scalable validation structure
.png)
The project includes two extra sections to help understand React form handling:
- Live Form Data — shows current form state
- Submitted Data Snapshot — shows final API-ready payload
These are for demonstration and learning only. They are not part of a production UI.
- Required
- Min 2 characters
- Only alphabets & spaces
- Required
- Valid integer
- Range: 1–120
- Required
- Must be in
a@b.comformat
- Required
- Min 8 characters
- Includes uppercase, lowercase, digit, special character
- Required
- Must match password
- Auto re-validates on password change
- At least one must be selected
- Required
- Required
react-dynamic-form-logic/
├── public/
│ └── index.html
│
├── src/
│ ├── components/
│ │ └── FormHandling.jsx
│ │
│ ├── assets/
│ │ └── ss/
│ │ ├── raw page without input.png
│ │ ├── form fields live validation.png
│ │ ├── form data live preview at different screen.png
│ │ └── form data snapshot printed (will be sent to api).png
│ │
│ ├── App.jsx
│ ├── main.jsx
│ ├── App.css
│ └── index.css
│
├── package.json
└── README.md
- Controlled components in React
- Building custom validation logic
- Handling checkbox arrays correctly
- Creating dependent validations (password + confirm password)
- Preventing form submission until fully valid
- Deploying React apps on GitHub Pages and Vercel
- Structuring clean, reusable component logic
Vijay Kumar Frontend Developer • React Enthusiast
If you find this helpful, please consider giving the repo a star ⭐