Instant Data Validation For Form Fields - input-validation.js

A tiny form validator plugin that provides a fast, real-time, client-side data validation functionality on input fields.

Features:

• Custom error messages.
• 10+ built-in validation rules. See below.
• Easy to create your own validation rules.
• Custom styles for invalid input fields & error messages.

How to use it:

1. To get started, include jQuery library and the input-validation plugin's files on the webpage.

<link rel="stylesheet" href="/path/to/css/validation.css">
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/jquery.input-validation.min.js"></script>

2. Apply validation rules to input fields using the data-validate-type attribute. All possible validation rules:

• email
• url
• date
• datemdy: mm-dd-YYYY
• dateymd: YYYY-mm-dd
• number
• digits
• equalTo
• phoneUS
• notempty: can not be empty
• gtzero: greater than zero
• maxlength
• minlength
• notempty_integer: can not be empty or zero

<input id="email" name="email" type="text" class="validate" data-validate-type="email">

3. Override the default error message & styles using the following data attributes:

<input id="email" name="email" type="text" class="validate"
       data-validate-type="email"
       data-validate-error-msg-text="custom error message"
       data-validate-error-msg-class="myCustomClass" />

4. Specify the max/min number of characters allowed to be typed using the data-constraint attributes:

<input id="most_chars" name="most_chars" type="text" class="validate"
       data-validate-type="maxlength" 
       data-constraint="5" />

5. Call the function on the form element to enable the form validator.

$("form#validate").inputValidation();

6. Override the default CSS styles.

.input-error {
  border: solid 1px red !important;
}

.warning-txt {
  color: orange;
}

7. Create your own validation rules as follows:

$.fn.inputValidation.addType( "customRule", function( custom_value ) {
  return /^\d{2}.\d{3}-\d{3}?$|^\d{5}-?\d{3}?$/.test( custom_value );
}, "Custom Rule." );

8. Override the default CSS classes:

$("form#validate").inputValidation({

  // CSS class applied to the border
  border: "input-error"

  // inline style of the border
  borderinline: '' 
  
});

Changelog:

2020-07-31

• Changed email regex

---

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