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

Instant Data Validation For Form Fields - input-validation.js
File Size: 79 KB
Views Total: 588
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.