Skip to content

khairnar2960/superform-validator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

242 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸ“¦ SuperForm Validator

A powerful, flexible, and universal JavaScript form validation library that supports Native HTML Forms, Express.js API validation and React form validation.

npm npm bundle size (version) GitHub release (by tag) jsDelivr hits (npm) npm GitHub issues GitHub closed issues


πŸš€ Features

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

πŸ“¦ Installation

npm install superform-validator

CDN Usage

<!-- 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>

πŸ”„ Quick Examples

HTML Form

const validator = FormValidator.init('#myForm', schema, onValid, onError, options);
validator.enableLiveValidation();

Express Middleware

app.get('/users', expressValidator.validateQuery({
  page: 'require|integer|gt(0)|cast::integer'
}), (req, res) => {
  res.json(req.validated);
});

Error Formatter

const msg = ErrorFormatter.format('Welcome @{user.name || "Guest"}', { user: {} });

πŸ““ Full Documentation


πŸ”„ Live Validation

validator.enableLiveValidation(['blur', 'change', 'input']);

Default events: blur, change.


πŸ”§ Custom Rule Registration

FormValidator.registerRule({
  name: 'isEven',
  paramType: 'none',
  argumentType: 'integer',
  aliases: [],
  validators: [
    {
      callback: (value) => parseInt(value) % 2 === 0,
      message: '@{field} must be an even number'
    }
  ]
}, 'integer');

πŸ”Ž Validation Schemas

String Syntax

{
  email: 'require|email|case::lower',
  age: 'require|integer|length(2)|intBetween(10, 15)|cast::integer',
  gender: 'optional|inList(male,female,other,none)|default(none)'
}

Object Syntax with Custom Messages

{
  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.'
    }
  }
}

πŸ”’ Validation Rules

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)

Full list of available rules and processors


πŸ” Error Placeholder Reference

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.

Error Formatter Guide


πŸ“‚ Validation Result Structure

{
  valid: boolean;
  validated: Record<string, any>;
  errors: Record<string, string>;
}

req.validated is available in Express.


🌟 Planned Features

  • 🌐 Multi-language support
  • πŸ‘₯ Field grouping and nested schema support

πŸ’» Examples


πŸ“œ License

Released under the MIT License


πŸ‘¨β€πŸ’» Author

Made with ❀️ by Harshal Khairnar
Founder, Hitraa Technologies
πŸ“§ harshal@hitraa.com

About

A powerful and flexible JavaScript form validator for HTML.

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors