📦 SuperForm Validator

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

🚀 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/[email protected]/dist/form-validator.js"></script>

<!-- OR -->

<!-- unpkg -->
<script src="https://unpkg.com/[email protected]/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

• 📝 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

🔄 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

• 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

📜 License

Released under the MIT License

👨‍💻 Author

Made with ❤️ by Harshal Khairnar
Founder, Hitraa Technologies
📧 [email protected]