This project is a React-based registration form with real-time validation, error handling, and password visibility toggle. It demonstrates how to build a user-friendly form with field validation and controlled components.
- Form fields for user registration (First Name, Last Name, Username, Email, Password, Phone No., Country, City, PAN No., Aadhar No.)
- Real-time input validation with error messages
- Password visibility toggle (Show/Hide password)
- Disable submit button until the form is valid
- Redirect to a success page upon successful submission using React Router
- React (with functional components and hooks)
- React Router (
useNavigatefor navigation) - Tailwind CSS for styling
- Custom form validation logic (modularized in
formValidation.js)
- Node.js (version 14 or later recommended)
- npm or yarn
- Clone the repository:
git clone https://github.com/SatvikSarthak/formvalidationassignment.git
cd react-form-validation
Install dependencies:
bash
Copy
Edit
npm install
# or
yarn install
Start the development server:
bash
Copy
Edit
npm start
# or
yarn start
The app will be available at http://localhost:3000.
Project Structure
src/FormPage.jsx — Main form component handling UI and state
src/formValidation.js — Validation logic, initial form data, and error messages
src/App.jsx — Application entry point (contains React Router setup)
src/index.js — React DOM rendering
Validation Logic
The validation rules are defined in formValidation.js and include:
Required fields
Email format check
Password complexity requirements
Phone number validation
Select dropdown validation
Errors are displayed inline below each input field.
Usage
Fill in the form fields
Errors will display immediately after entering invalid data
Toggle password visibility with the "Show"/"Hide" button
Submit button becomes enabled only when all validations pass
On submit, the form data is sent to the /success page
License
This project is licensed under the MIT License.