A powerful, flexible, and universal JavaScript form validation library that supports Native HTML Forms, Express.js API validation, and is planned to support React integration in the future.
Feature | Supported |
---|---|
Native HTML Form Validation | ✅ Yes |
Express.js Integration | ✅ Yes |
File Input Validation | ✅ Yes |
Type Casting & Pre/Post Processors | ✅ Yes |
Live Validation Support | ✅ Yes |
Custom Rule Registration | ✅ Yes |
Flexible Error Formatting Engine | ✅ Yes |
TypeScript Ready | ✅ Yes |
React Support | ⏳ Coming Soon |
npm install superform-validator
<!-- jsDeliver -->
<!-- Latest version -->
<script src="https://cdn.jsdelivr.net/npm/superform-validator@latest/dist/form-validator.js"></script>
<!-- OR -->
<!-- Recommended with specific version -->
<script src="https://cdn.jsdelivr.net/npm/superform-validator@1.0.4/dist/form-validator.js"></script>
<!-- OR -->
<!-- unpkg -->
<script src="https://unpkg.com/superform-validator@1.0.4/dist/form-validator.js"></script>
const validator = FormValidator.init('#myForm', schema, onValid, onError, options);
validator.enableLiveValidation();
app.get('/users', expressValidator.validateQuery({
page: 'require|integer|gt(0)|cast::integer'
}), (req, res) => {
res.json(req.validated);
});
const msg = ErrorFormatter.format('Welcome @{user.name || "Guest"}', { user: {} });
- 📝 HTML Form Validator
- 🟢 Live Validation
- 🔗 Custom Rule Registration
- 🔌 Express.js Plugin Guide
- ❌ Error Formatter Guide
- 🕳 Error Placeholders
- ✳ Validation Schemas
- ✅ Validation Rules
- ⚡ Validation Result Structure
- 🔤 Rules and Processors Reference
validator.enableLiveValidation(['blur', 'change', 'input']);
Default events: blur
, change
.
FormValidator.registerRule({
name: 'isEven',
paramType: 'none',
argumentType: 'integer',
aliases: [],
validators: [
{
callback: (value) => parseInt(value) % 2 === 0,
message: '@{field} must be an even number'
}
]
}, 'integer');
{
email: 'require|email|case::lower',
age: 'require|integer|length(2)|intBetween(10, 15)|cast::integer',
gender: 'optional|inList(male,female,other,none)|default(none)'
}
{
name: {
require: true,
minLength: 2,
maxLength: 20,
messages: {
require: 'Name is required.',
minLength: 'Name must be at least 2 characters.',
maxLength: 'Name must be less than 20 characters.'
}
}
}
Supported rules include:
-
require
,minLength
,maxLength
,length
,email
,integer
,float
,mobile
-
file::maxFiles
,file::maxSize
,file::accepts
- Pre/Post processors like
trim
,case::camel
,case::upper
- Casting:
cast::integer
,cast::boolean
,cast::float
- Full list available in detailed rule reference (coming soon)
Supported placeholders:
@{field}
@{param.field}
@{param.value}
@{param}
@{param.min}
@{param.max}
@{param.raw}
Supports advanced formatting with nested access, fallbacks, and string modifiers like upper
, lower
, capitalize
.
{
valid: boolean;
validated: Record<string, any>;
errors: Record<string, string>;
}
req.validated
is available in Express.
- 🔊 React integration via custom hooks
- 🌐 Multi-language support
- 👥 Field grouping and nested schema support
- Basic Form Validation
- File Upload Validation
- Date and Time Validation
- Custom Rule: Even Number
- Express Middleware Example
- Express Callback Example
Released under the MIT License
Made with ❤️ by Harshal Khairnar
Founder, Hitraa Technologies
📧 harshal@hitraa.com