https://github.com/codewithmark/one-line-validator
Validate Any Form in 60 Seconds (1 Line of Code!)
https://github.com/codewithmark/one-line-validator
Last synced: 8 days ago
JSON representation
Validate Any Form in 60 Seconds (1 Line of Code!)
- Host: GitHub
- URL: https://github.com/codewithmark/one-line-validator
- Owner: codewithmark
- License: gpl-3.0
- Created: 2025-06-14T04:21:16.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-08-20T22:30:50.000Z (10 months ago)
- Last Synced: 2025-08-21T00:25:16.361Z (10 months ago)
- Size: 53.7 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🧪 OneLineValidator
**A lightweight, beginner-friendly JavaScript class for validating HTML forms with custom error messages and clean visual feedback.**
---
## 🚀 Features
* ✅ One-line validation with `OneLineValidator.validate(...)`
* 🎯 Custom error messages via `id` or `class`
* 🔄 Live field validation on input/change
* ✨ Styled error messages with animation
* 📦 Returns form data object when valid, `false` when not
* 💡 Treats any field with a custom error as required (no `required` attribute needed)
---
## 🛠️ Installation
Download or copy `OneLineValidator.js` into your project.
Then include it:
```html
```
Or import via module (if using bundlers like Vite/Webpack):
```js
import OneLineValidator from './OneLineValidator.js';
```
---
## ✅ Usage Example
### HTML Form
```html
IMPORTANT NOTE > all the input fields need to have id assigned to it otherwise return object will be null
Submit
```
### JavaScript
```js
//IMPORTANT NOTE > all the input fields need to have id assigned to it otherwise return object will be null
const customErrors = [
{ id: "email", msg: "Please enter a valid email address." },
{ class: "password", msg: "Password must be at least 6 characters." },
{ id: "confirmPassword", msg: "Passwords must match." },
{ class: "phone", msg: "Enter a valid phone number (10–15 digits)." },
{ id: "terms", msg: "You must accept the terms to continue." }
];
document.querySelector('#myForm').addEventListener('submit', function (e) {
e.preventDefault();
const data = OneLineValidator.validate('#myForm', customErrors);
if (data) {
console.log('✅ Form is valid!', data);
// Submit or use data
} else {
console.log('❌ Form has errors');
}
});
```
---
## 📦 Return Format (If Valid)
```json
{
"email": "user@example.com",
"password": "abc123",
"confirmPassword": "abc123",
"phone": "+1234567890",
"terms": true
}
```
---
## 🎨 Styling
Styles are automatically injected:
* `.field-error` adds a red border and light red background
* `.error-message` shows an animated message with an ❌ icon
---
## 📚 License
MIT — free to use, modify, and share.
---
## 💬 Author
Built by \[Code With Mark].
Contributions, suggestions, and issues welcome!