📦 SuperForm Validator

A powerful and flexible JavaScript form validator for native HTML forms.

🚀 Features

• ✅ Native HTML form validation
• ✅ Custom rules and messages per field
• ✅ Live validation on blur and change
• ✅ File input validation (max files, size, types)
• ✅ Type casting (string, number, boolean, case conversions)
• ✅ Auto-scroll to the first error
• ✅ Custom error display element and CSS class
• ✅ Easy reset and form clearing

Installation

To use FormValidator include form-validator.js just above closing body tag into html

  <script src="form-validator.js"></script>

OR use jsDeliver CDN

  <script src="https://cdn.jsdelivr.net/npm/superform-validator@1.0.1/dist/form-validator.js"></script>

OR use unpkg CDN

  <script src="https://unpkg.com/superform-validator@1.0.1/dist/form-validator.js"></script>

🛠️ Initialization

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

Parameters:

⚙️ Options

📚 Supported Rules

📝 Basic Rules

📂 File Rules

🔧 Custom Rules

validator.addCustomRule('isEven', (value) => parseInt(value) % 2 === 0, 'Value must be even');

🧪 Custom Regex Example

const schema = {
  username: {
    custom: {
      pattern: /^[a-zA-Z0-9_]{5,15}$/,
      message: 'Username must be 5-15 characters and alphanumeric'
    }
  }
};

🔄 Casting Rules

Usage

HTML Form Mode

<form id="myForm">
  <input name="name" required />
  <input name="email" type="email" required />
  <button type="submit">Submit</button>
</form>

const validator = FormValidator.init('#myForm', {
  name: 'require|minLength::2',
  email: 'require|email',
});

validator.enableLiveValidation();

Example Schemas

const schema = {
  name: 'require|minLength::2|maxLength::50',
  email: {
    require: true,
    email: true,
    messages: {
      require: 'Email is mandatory.',
      email: 'Please enter a valid email address.'
    }
  }
}

🔁 Useful Methods

🎯 Example: Full Options

const validator = FormValidator.init('#myForm', {
  username: 'require|minLength::3|alphanum',
  password: {
    require: true,
    minLength: 6,
    messages: { minLength: 'Password must be at least 6 characters' },
    cast: 'trim'
  },
  profilePic: 'file::maxFiles(1)|file::accepts(jpg|png)'
}, (data) => {
  console.log('Form Valid!', data);
}, (errors) => {
  console.log('Form Errors', errors);
}, {
  errorElement: 'span',
  errorClass: 'input-error'
});

validator.enableLiveValidation();

💬 Validation Message Templates

SuperForm Validator allows dynamic error messages using placeholders within message templates.

🔹 Template Format:

@{placeholder}

🔹 Available Placeholders:

✅ Example: Default Template Usage

const schema = {
  password: {
    require: true,
    minLength: 8 // Uses default message: "Minimum length is @{length}"
  }
}

If user enters a 5-character password, the displayed message will be:

Minimum length is 8

✅ Example: Custom Template Message

const schema = {
  password: {
    require: true,
    minLength: {
      rule: 8,
      message: '@{field} must be at least @{length} characters long'
    }
  }
};

If user enters "abc", the displayed message will be:

Password must be at least 8 characters long

✅ Example: File Rule Template

const schema = {
  profilePic: 'file::maxFiles(1)|file::accepts(jpg|png)'
}

If user uploads a .pdf file, the displayed message will be:

Invalid file type. Only (jpg, png) allowed

✔️ The @{types} placeholder is replaced automatically.

✅ Example: Field-Level Messages

You can override messages per field like this:

const schema = {
  email: {
    require: true,
    email: true,
    messages: {
      require: 'Email is mandatory',
      email: 'Please enter a valid email'
    }
  }
}

✔️ Priority:

Field message > Inline message > Default system message

📌 Summary: Message Template Power

• ✅ Clean, reusable, and consistent.
• ✅ Easy to localize in the future.
• ✅ Fully customizable per rule or per field.

📜 License

Released under the MIT License

👨‍💻 Author

Made with ❤️ by Harshal Khairnar
Founder, Hitraa Technologies
📧 harshal@hitraa.com