📝 Form Handling & Validation using JavaScript
This is a mini project built for learning Module 7: Form Handling and Validation in JavaScript.
It shows how to create a simple signup form and validate user input before submitting.
- ✅ Required fields validation (Username, Email, Password)
- ✅ Email format check (must contain
@and domain) - ✅ Password length check (minimum 6 characters)
- ✅ Real-time validation (feedback while typing)
- ✅ Success message on valid submission
- ✅ Advanced example with Confirm Password + Success Popup Modal
- Editor: Visual Studio Code (or any text editor)
- Browser: Google Chrome, Firefox, or Edge
No extra installations are required — just open the HTML file in a browser.
form-validation-project/ │ ├── index.html # Basic version (Username, Email, Password) ├── script.js # JavaScript for form validation │ ├── index-advanced.html # Advanced version with Confirm Password + Popup │ └── README.md # Project documentation
yaml Copy code
- Download or clone this repo:
git clone https://github.com/YourUsername/form-validation-project.git
Open the project folder.
Double-click index.html to open in your browser. (Optional: use VS Code Live Server for auto reload.)
Try filling out the form and testing different cases.
🧪 Testing the Form Case 1 — Empty Fields Submit without entering anything.
Errors:
Username is required
Email is required
Password is required
Case 2 — Invalid Email Enter user@ in email.
Error: Please enter a valid email.
Case 3 — Short Password Enter 123 as password.
Error: Password must be at least 6 characters.
Case 4 — Success Username: Alice
Email: [email protected]
Password: secure123
✅ Success message appears.
Advanced Version Includes Confirm Password field.
If passwords don’t match → error: Passwords do not match.
On success → shows a 🎉 popup modal.
📖 What I Learned How to create forms in HTML.
How to use JavaScript to validate input.
How to give real-time feedback with event listeners.
How to show success/error messages in the UI.
How to build a simple modal popup in pure JavaScript.
📸 Screenshots (optional) Add screenshots here if you want to show examples.
📜 License This project is for learning purposes only. You are free to use and modify it.
yaml Copy code
👉 This README is ready-to-use for GitHub.
Do you also want me to write a short LinkedIn post description (like you did for the other projects) so you can share this mini project as a learning milestone?
Ask ChatGPT