Extensible Form Validation Plugin - Easy Validator

Extensible Form Validation Plugin - Easy Validator
File Size: 9.31 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A small (~3kb minified), easy, extensible jQuery form validation that prevents form submit until all form fields are valid.

You can add your own validation rules, or set up your own methods to work. You can also determine whether or not fields are valid and code specific actions to your needs.

How to use it:

1. Insert the JavaScript file easy-validator.min.js after the latest jQuery JavaScript library.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/js/easy-validator.js"></script>

2. Apply validators to form fields using the following CSS classes:

  • 'required': required field
  • 'validate-number': valid number
  • 'validate-digits': numbers only
  • 'validate-currency-dollar': valid $ amount
  • 'validate-url': valid URL.',
  • 'validate-email': valid email address
  • 'validate-date': valid date format: dd/mm/yyyy
  • 'validate-alphanum': only letters (a-z) or numbers (0-9)
  • 'validate-alpha': letters only (a-z)
<input type="text" class="validate-email required" name="email" placeholder="Email Address">
<input type="text" class="validate-alpha required" name="name" placeholder="Full Name (letters only)">
<input type="text" class="validate-alphanum required" name="username" placeholder="Alphanumeric username">
<input type="url" class="validate-url" name="url" placeholder="www.example.com">
...

3. Add a new validator to the plugin:

EasyValidator.add("validate-custom", "Custom Error Message", function(val) {
  return val !== "Other";
})
<input type="text" class="validate-custom required" laceholder="Custom">

4. Check if the form field is valid. Returns true or false.

// val: input value
// name: class name
EasyValidator.isValid(val, name)

5. Check if the form field is empty. Returns true or false.

// val: input value
EasyValidator.isEmpty(val)

6. Get the validation message.

// val: input value
// name: class name
EasyValidator.getValidationMsg(val, name)

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