Animated Customizable Form Validator - jQuery validate.js

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/validate.js@master/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-letters-numbers
• data-ip
• data-passwd
• data-email
• data-url
• data-pattern: regex
• data-optional

<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 (!@#._-$%^&*)',
      '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',

    // alignment
    align: 'right',

    // 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');

Changelog:

2021-01-06

• added: regex, letters and numbers (without spaces)

2020-12-10

• improved error logs (when debug: true)

---

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