Project 12/20
📋 Form Validation is a responsive sign-up form built with custom client-side validation using the Constraint Validation API and JavaScript logic. It ensures that users enter valid information, confirms matching passwords, and provides instant feedback through styled messages and input borders — making form submission secure and user-friendly.
- ✅ Validates full name, phone, email, website URL, and password
- ✅ Real-time input validation using built-in HTML attributes and JS
- ✅ Password strength requirement using RegEx
- ✅ Confirms password match before submission
- ✅ Displays clear error/success messages with styled borders
- ✅ Uses JavaScript to prevent form submission if data is invalid
- ✅ Stores submitted user data in an object for further use
- HTML5
- CSS3
- Vanilla JavaScript
- Constraint Validation API
- How to use the Constraint Validation API (
checkValidity) - Implementing custom validation logic with JavaScript
- Writing regex patterns for strong password rules
- Creating dynamic success/error UI with border color feedback
- Structuring form data and capturing it via JS
- Handling form submission and preventing default behavior
- Designing user-friendly forms with accessibility in mind
🚀 For me, this project was more about practice and gaining additional experience,
rather than learning something entirely new.👨💻 Since I’m not a beginner and already familiar with these technologies,
I approached it with confidence — and still, I truly enjoyed working on it.🎯 Overall, I consider this a very valuable and enjoyable experience.
- Video Player | [Project 11/20] → View Repository
- Spock Rock Game | [Project 13/20] → View Repository
- Google Fonts – Stylish and web-safe fonts
- RegEx Background Info – Basics of pattern attribute in HTML
- RegEx Playground Tool (Password Pattern) – Live tester for password regex patterns
- W3Schools - Forms – HTML form structure and usage
- W3Schools - Prevent Default – Cancel default browser actions
- MDN - Input Element – Input field attributes and types
- MDN - Valid Pseudo Class – Style fields based on validation
- MDN - Form Validation – How form validation works in the browser
- MDN - Constraint Validation – Using the HTML validation API
- MDN - Submit Event – Handling form submit events
- CSS Tricks - Different Approaches to Validation Article – Overview of validation approaches
🙌 Thanks for checking out my project! More coming soon. Stay tuned 🚀