autovalidator-sdk
v1.0.3
Published
A lightweight frontend JavaScript SDK for real-time input validation with built-in support for Malaysian IC, car plates, postcodes, and extensible custom validators
Maintainers
seann004Readme
Auto Input Validator
A lightweight, frontend JavaScript SDK for real-time input validation with built-in support for Malaysian formats and extensible custom validators.
Features
✅ Real-time validation - Validates input as users type
✅ Auto-formatting - Automatically formats input (e.g., IC)
✅ Malaysian standards - Built-in validators for IC, car plates, and postcodes
✅ Custom validators - Extensible system for custom validation rules
✅ TypeScript support - Full TypeScript definitions included
✅ Zero dependencies - Lightweight and fast
✅ Browser compatible - Works in all modern browsers
Installation
npm
npm install autovalidator-sdkES6 Modules
import InputValidator from 'autovalidator-sdk';CommonJS
const InputValidator = require('autovalidator-sdk');Quick Start
<!DOCTYPE html>
<html>
<head>
<title>Input Validator Demo</title>
</head>
<body>
<input type="text" id="icInput" placeholder="Enter IC Number">
<input type="text" id="plateInput" placeholder="Enter Car Plate">
<input type="text" id="postcodeInput" placeholder="Enter Postcode">
<input type="email" id="emailInput" placeholder="Enter Email Address">
<script src="input_validate.js"></script>
<script>
// Apply validators
InputValidator.validateIC(document.getElementById('icInput'));
InputValidator.validateCarPlate(document.getElementById('plateInput'));
InputValidator.validatePostcode(document.getElementById('postcodeInput'));
InputValidator.validateEmail(document.getElementById('emailInput'));
</script>
</body>
</html>Built-in Validators
🆔 IC Number (NRIC) Validator
Validates Malaysian Identity Card numbers with automatic formatting.
const icInput = document.getElementById('icInput');
InputValidator.validateIC(icInput);Features:
- Only accepts digits (0-9)
- Maximum 12 digits
- Auto-formats to
XXXXXX-XX-XXXXpattern - Real-time validation feedback
Valid format: 123456-12-1234
🚗 Car Plate Validator
Validates Malaysian car plate numbers with various format support.
const plateInput = document.getElementById('plateInput');
InputValidator.validateCarPlate(plateInput);Features:
- Accepts letters and numbers only
- Automatically converts to uppercase
- Removes spaces and symbols
- Must contain at least one letter and one number
- Maximum 12 characters
Valid formats:
ABC1234WPL123AV1234
📮 Postcode Validator
Validates Malaysian 5-digit postcodes.
const postcodeInput = document.getElementById('postcodeInput');
InputValidator.validatePostcode(postcodeInput);Features:
- Only accepts digits (0-9)
- Exactly 5 digits required
- Real-time validation
Valid format: 12345
📧 Email Validator
Validates email addresses with comprehensive format checking.
const emailInput = document.getElementById('emailInput');
InputValidator.validateEmail(emailInput);Features:
- Accepts letters, numbers, @, ., _, - only
- Automatically converts to lowercase
- Maximum 254 characters (RFC standard)
- Real-time email format validation
Valid formats:
Custom Validators
Create your own validation rules for specific use cases.
Registering a Custom Validator
InputValidator.registerValidator('phoneNumber', {
allowedChars: /[0-9]/, // Only digits allowed during typing
maxLength: 12, // Maximum length including dash (XXX-XXXXXXX)
transform: (value) => {
// Auto-format to XXX-XXXXXXX
const digits = value.replace(/\D/g, '');
if (digits.length <= 3) return digits;
if (digits.length <= 10) return digits.slice(0, 3) + '-' + digits.slice(3);
return digits.slice(0, 3) + '-' + digits.slice(3, 11);
},
pattern: /^\d{3}-\d{7,8}$/, // XXX-XXXXXXX format (10-11 digits)
keypressError: "Only numbers are allowed",
validationError: "Phone number must follow XXX-XXXXXXX format (10-11 digits)",
errorTimeout: 3000 // Error display duration in ms
});Applying a Custom Validator
const phoneInput = document.getElementById('phoneInput');
InputValidator.applyCustomValidator(phoneInput, 'phoneNumber');Custom Validator Configuration
| Property | Type | Description |
|----------|------|-------------|
| allowedChars | RegExp | Characters allowed during keypress |
| maxLength | number | Maximum input length |
| transform | function | Transform input value (e.g., uppercase) |
| pattern | RegExp | Final validation pattern |
| keypressError | string | Error message for invalid keypress |
| validationError | string | Error message for invalid format |
| errorTimeout | number | Error display duration (ms) |
Advanced Examples
Phone Number Validator
InputValidator.registerValidator('phoneNumber', {
allowedChars: /[0-9]/,
maxLength: 12,
transform: (value) => {
// Remove all non-digits and format as XXX-XXXXXXX
const digits = value.replace(/\D/g, '');
if (digits.length <= 3) return digits;
if (digits.length <= 10) return digits.slice(0, 3) + '-' + digits.slice(3);
return digits.slice(0, 3) + '-' + digits.slice(3, 11);
},
pattern: /^\d{3}-\d{7,8}$/,
keypressError: "Only numbers are allowed",
validationError: "Phone number must follow XXX-XXXXXXX format (10-11 digits)"
});
const phoneInput = document.getElementById('phoneInput');
InputValidator.applyCustomValidator(phoneInput, 'phoneNumber');Credit Card Validator
InputValidator.registerValidator('creditCard', {
allowedChars: /[0-9]/,
maxLength: 19,
transform: (value) => {
// Add spaces every 4 digits
return value.replace(/\s/g, '').replace(/(.{4})/g, '$1 ').trim();
},
pattern: /^\d{4}\s\d{4}\s\d{4}\s\d{4}$/,
keypressError: "Only numbers are allowed",
validationError: "Credit card must be 16 digits"
});Password Strength Validator
InputValidator.registerValidator('strongPassword', {
allowedChars: /[a-zA-Z0-9!@#$%^&*]/,
maxLength: 128,
pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*]).{8,}$/,
keypressError: "Only letters, numbers and !@#$%^&* are allowed",
validationError: "Password must contain uppercase, lowercase, number and special character"
});TypeScript Support
Full TypeScript definitions are included:
import InputValidator from 'autovalidator-sdk';
const icInput: HTMLInputElement = document.getElementById('icInput') as HTMLInputElement;
InputValidator.validateIC(icInput);
// Custom validator with type safety
InputValidator.registerValidator('customValidator', {
allowedChars: /[a-z]/,
maxLength: 10,
pattern: /^[a-z]{5,10}$/,
keypressError: "Only lowercase letters allowed",
validationError: "Must be 5-10 lowercase letters"
});Static Methods
validateIC(input: HTMLInputElement): void
Applies IC number validation to an input element.
validateCarPlate(input: HTMLInputElement): void
Applies car plate validation to an input element.
validatePostcode(input: HTMLInputElement): void
Applies postcode validation to an input element.
registerValidator(name: string, config: ValidatorConfig): void
Registers a new custom validator.
applyCustomValidator(input: HTMLInputElement, validatorName: string): void
Applies a registered custom validator to an input element.