Animated Customizable Form Validator - jQuery validate.js

Animated Customizable Form Validator - jQuery validate.js
File Size: 11.7 KB
Views Total: 178
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

validate.js is a simple yet customizable form validation plugin to validate form fields using REGEX, required, or built-in rules.

More Features:

  • Compatible with the latest Bootstrap framework.
  • Animates & Colorize form fields if invalid.
  • Custom error messages for invalid form fields.
  • Real-time form validation.
  • 10 pre-defined validation rules.
  • Supports for multiple languages.

How to use it:

1. To get started, download and insert the main javaScript validate.min.js after jQuery.

<!-- jQuery Library -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- From Local -->
<script src="/path/to/validate.min.js"></script>
<!-- Or From CDN -->
<script src="https://cdn.jsdelivr.net/gh/myei/[email protected]/validate.min.js"></script>

2. Apply built-in validation rules to your form fields as follows:

  • data-min
  • data-max
  • data-letters
  • data-letters-spaces
  • data-numbers
  • data-ip
  • data-passwd
  • data-email
  • data-url
<textarea data-min="1" data-max="140" data-numbers />
<input type="text" required />

3. Or define your own validation rules using the data-pattern attribute:

<input type="text" data-pattern="^[0-9]+$" data-pattern-msg="Custom Error Messages Here" />

4. Override the default error messages if needed:

<input type="text" 
       data-max="20" 
       data-min="2" 
       data-min-msg="Min Error Message" 
       data-max-msg="Max Error Message" 
       required />

<input type="text" 
       data-default-msg="Custom Message"
       />

5. Initialize the plugin to enable the form validator.

var validate = Validate();

6. Validate particular fields in your HTML form.

<input type="radio" name="radio" class="validame" />
<select name="select" class="validame">
  <option value=""></option>
</select>
var validate = Validate({
    type: 'group',
    group: 'validame'
});

7. Localize the form validator.

var validate = Validate({
    lang: {
      min: 'The minimum character length for this field is:',
      max: 'The maximum character length for this field is:',
      numbers: 'This field only allows numbers',
      letters: 'This field only allows letters (without spaces)',
      lettersSpaces: 'This field only allows letters',
      text: 'This field is required and cannot be empty',
      password: 'This field is required and cannot be empty',
      passwd: 'At least one uppercase letter <br> - At least one lowercase letter <br> - At least one numeric character <br> - At least one special character ([email protected]#._-$%^&*)',
      'select-one': 'This field is required and cannot be empty',
      email: 'It must be a valid email',
      textarea: 'This field is required and cannot be empty',
      hidden: 'This field is required and cannot be empty',
      checkbox: 'This field is required and cannot be empty',
      radius: 'This field is required and cannot be empty',
      file: 'You must add at least one file',
      ip: 'This is not a valid ip address',
      url: 'This is not a correct url. <br> - ex: https://google.com ',
      pattern: 'This does not meet the specified pattern:'
    }
});

8. More configuration options with default values.

var validate = Validate({

    // if the form field is required
    required: true,

    // shows Warn messages
    warn: true,
    
    // shows descriptions
    descriptions: true,

    // animates invalid form valids
    animations: true,

    // apply a color to the border of invalid fields
    color: 'red',

    // real-time form validation
    realTime: true,

    // debug mode
    debug: false
    
});

9. Restrict a form field to only allow certain characters:

// <input type="text" class="validame" />
Validate().addLive('numeric', 'validame');

// <input type="text" class="validate-alphabetic" />
Validate().addLive('alphabetic');

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