Chainable jQuery Input Validation Plugin - InputRule

InputRule is a lightweight jQuery form validation plugin that adds chainable, reusable validation and transformation logic to your existing form fields.

Features:

• Chainable API: Apply multiple validation rules in a single method chain
• Real-time transformation: Filter input characters as users type
• Built-in validation rules: Required, length limits, character types, email, regex, and field matching
• Customizable error handling: Use default error views or implement custom error callbacks
• Automatic maxlength attributes: Sets HTML maxlength when using maxlength validation
• Flexible character filtering: Allow or restrict alphabetic, numeric, and special characters
• Input trimming: Optional whitespace trimming before validation

How to use it:

1. Download the InputRule jQuery plugin and load the 'jquery.inputrule.js' script after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.inputrule.min.js"></script>

2. Select an input element with jQuery and initialize the plugin by calling .InputRuleChain(). From there, you can chain any validation or configuration methods. The chain is terminated with .then(), which activates the event listeners. Here's an example for a username field that must be alphanumeric, between 5 and 20 characters long, and is required.

$('#myInput')
  .InputRuleChain()
  .required()
  .alphabet(true)
  .number(false)
  .noSpecialChar(false)
  .maxlength(50)
  .then((val) => {
    console.log('Valid input:', val);
});

3. All possible validations rules, configuration options and hooks.

• .required(true): The field cannot be empty.
• .minlength(n): Requires a minimum of n characters.
• .maxlength(n): Sets a maximum of n characters and adds the maxlength attribute to the input.
• .alphabet(true/false): If true, allows only alphabetic characters. If false, disallows them.
• .number(true/false): If true, allows only numeric characters. If false, disallows them.
• .alphanumeric(true): Allows only letters and numbers.
• .noSpecialChar(true/false): A bit confusingly named. If false, it removes special characters (same as .alphanumeric(true)). If true it does nothing. I've found it's better to stick with .alphanumeric(true) for clarity.
• .email(true): Validates against a standard email regex.
• .regex(regex): Validates against a custom regular expression.
• .match(selector): Checks if the input's value matches the value of another field, identified by a jQuery selector (e.g., '#password').
• .trim(true): Trims whitespace from the value before validation.
• .onInvalid(callback): A function to run when validation fails. It receives the element and error message as arguments.
• .onValid(callback): A function to run when validation passes. It receives the element as an argument.
• .useDefaultErrorView(true): Toggles the built-in error display, which adds an input-error class and a <div> with the error message.
• .then(callback): Attaches the input event listener and provides a final callback that only executes upon successful validation. This is the method that makes the validation "live".

4. Style the default error messages. The default error view adds the 'input-error' class to invalid inputs and creates elements with the 'input-error-message' class. You'll need to define CSS styles for these classes:

.input-error {
  border: 1px solid #ff0000;
}

.input-error-message {
  color: #ff0000;
  font-size: 12px;
  margin-top: 5px;
}

See Also:

• 10 Best Form Validation JavaScript Plugins

---

This awesome jQuery plugin is developed by yozawiratama. For more Advanced Usages, please check the demo page or visit the official website.