auto-input-validator
v1.0.1
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
Downloads
13
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 auto-input-validatorES6 Modules
import InputValidator from 'auto-input-validator';CommonJS
const InputValidator = require('auto-input-validator');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">
<script src="input_validate.js"></script>
<script>
// Apply validators
InputValidator.validateIC(document.getElementById('icInput'));
InputValidator.validateCarPlate(document.getElementById('plateInput'));
InputValidator.validatePostcode(document.getElementById('postcodeInput'));
</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
Custom Validators
Create your own validation rules for specific use cases.
Registering a Custom Validator
InputValidator.registerValidator('phoneNumber', {
allowedChars: /[0-9+-]/, // Allowed characters during typing
maxLength: 15, // Maximum input length
transform: (value) => value.replace(/\s/g, ''), // Remove spaces
pattern: /^[+]?[0-9]{10,15}$/, // Final validation pattern
keypressError: "Only numbers, + and - are allowed",
validationError: "Phone number must be 10-15 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
Email Validator
InputValidator.registerValidator('email', {
allowedChars: /[a-zA-Z0-9@._-]/,
maxLength: 254,
transform: (value) => value.toLowerCase(),
pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
keypressError: "Only letters, numbers, @, ., _, - are allowed",
validationError: "Please enter a valid email address"
});
const emailInput = document.getElementById('emailInput');
InputValidator.applyCustomValidator(emailInput, 'email');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 'auto-input-validator';
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.