A powerful, flexible, and universal JavaScript form validation library that supports Native HTML Forms, Express.js API validation and React form validation.
| 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 | β Yes |
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@2.1.1/dist/form-validator.js"></script>
<!-- OR -->
<!-- unpkg -->
<script src="https://unpkg.com/superform-validator@2.1.1/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
- π¦ React Middleware Guide
- π§ͺ React Examples
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,mobilefile::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.
- π 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
- React Basic Example
- React Controller Example
Released under the MIT License
Made with β€οΈ by Harshal Khairnar
Founder, Hitraa Technologies
π§ harshal@hitraa.com