https://github.com/dalascript/form-validator
ZTM JS Web Projects Course | Form Validator | Project 12/20
https://github.com/dalascript/form-validator
Last synced: 28 days ago
JSON representation
ZTM JS Web Projects Course | Form Validator | Project 12/20
- Host: GitHub
- URL: https://github.com/dalascript/form-validator
- Owner: DalaScript
- Created: 2025-06-19T08:25:08.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-06-19T13:46:57.000Z (8 months ago)
- Last Synced: 2025-06-19T13:50:44.439Z (8 months ago)
- Language: HTML
- Homepage:
- Size: 2.93 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Form Validation | ZTM JS Web Projects Course
**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.
---
## 📚 Table of Contents
- [🔎 Overview](#-overview)
- [📸 Screenshot](#-screenshot)
- [🔗 Links](#-links)
- [📌 Features](#-features)
- [🛠️ Built with](#️-built-with)
- [🧠 My process](#-my-process)
- [🗃️ Useful resources](#️-useful-resources)
- [🔙 Previous Project](#-previous-project)
- [🔜 Next Project](#-next-project)
- [👤 Author](#-author)
- [🌐 Connect with Me](#-connect-with-me)
- [💻 Coding Profiles](#-coding-profiles)
---
## 🔎 Overview
### 📸 Screenshot
### 🔗 Links
- [🔴 Live Demo](https://dalascript.github.io/form-validator/)
- [🗂️ GitHub Repository](https://github.com/DalaScript/form-validator)
### 📌 Features
- ✅ 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
### 🛠️ Built with
- HTML5
- CSS3
- Vanilla JavaScript
- Constraint Validation API
---
## 🧠 My Process
### 🗃️ Useful resources
- [Google Fonts](https://fonts.google.com/)
- [RegEx Background Info](https://html.com/attributes/input-pattern/)
- [RegEx Playground Tool (Password Pattern)](https://regexr.com/3bfsi)
- [W3Schools - Forms](https://www.w3schools.com/html/html_forms.asp)
- [W3Schools - Prevent Default](https://www.w3schools.com/jsref/event_preventdefault.asp)
- [MDN - Input Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input)
- [MDN - Valid Pseudo Class](https://developer.mozilla.org/en-US/docs/Web/CSS/:valid)
- [MDN - Form Validation](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation)
- [MDN - Constraint Validation](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation)
- [MDN - Submit Event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event)
- [CSS Tricks - Different Approaches to Validation Article](https://css-tricks.com/form-validation-part-1-constraint-validation-html/)
### 🔙 Previous Project
- Video Player | *Project 11/20* → [View Repository](https://github.com/DalaScript/video-player)
### 🔜 Next Project
- Spock Rock Game | *Project 13/20* → [View Repository](https://github.com/DalaScript/spock-rock-game)
---
## 👤 Author
### 🌐 Connect with Me
- [Instagram](https://www.instagram.com/DalaScript)
- [YouTube](https://www.youtube.com/@DalaScript)
### 💻 Coding Profiles
- [freeCodeCamp](https://www.freecodecamp.org/DalaScript)
- [FrontendMentor](https://www.frontendmentor.io/profile/DalaScript)
- [GitHub](https://github.com/DalaScript)
*🙌 Thanks for checking out my project! More coming soon. Stay tuned 🚀*