Minimal HTML5 Form Field Validation Plugin For jQuery - validate

validate.js is a lightweight client-side form validation plugin for jQuery that allows to validate and mask form fields using HTML5 data attributes and/or regular expressions.

How to use it:

1. Include the JavaScript file jquery-validate.js after you've loaded jQuery JavaScript library as this:

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery-validate.js"></script>

2. To validate your form, just add the following HTML data attributes to your form fields:

<input type="text" name="name" data-required>
<input type="text" name="price" id="price" placeholder="R$ 0,00" data-pattern="^(?:R\$)?\s*(\d+)(?:[,\.](\d)(\d)?)?\d*$" data-mask="R$ ${1},${2:`0`}${3:`0`}">

3. Include the JavaScript file jquery-validate.js after you've loaded jQuery JavaScript library as this:

• data-conditional: Accepts one or more indexes separated by spaces from the 'conditional' object that should contain a the boolean return function.  
• data-ignore-case: Specify if is case-insensitive. 
• data-mask: Adds custom mask rules to the field.
• data-pattern: Regular expression to validate the field
• data-prepare: Accepts a index from the 'prepare' object that should contain a function to receive the field value and returns a new value treated.  
• data-required: Specify if is required. 
• data-trim: If true, removes the spaces from the ends in the field value. (The field value is not changed) false
• data-validate: Used to call extensions.

<input type="text" name="name" data-required>
<input type="text" name="price" id="price" placeholder="R$ 0,00" data-pattern="^(?:R\$)?\s*(\d+)(?:[,\.](\d)(\d)?)?\d*$" data-mask="R$ ${1},${2:`0`}${3:`0`}">
...

4. Active the validation functionality on your html form.

$('form').validate();

5. All default plugin settings.

$('form').validate({

  // Send form if is valid?
  sendForm : true,

  // Use WAI-ARIA properties
  waiAria : true,

  // Validate on submit?
  onSubmit : true,

  // Validate on onKeyup?
  onKeyup : false,

  // Validate on onBlur?
  onBlur : false,

  // Validate on onChange?
  onChange : false,

  // Default namespace
  nameSpace : 'validate',

  // Conditional functions
  conditional : {},

  // Prepare functions
  prepare : {},

  // Fields descriptions
  description : {},

  // A fielter to the fields
  filter : '*'

});

6. Callback function available.

$('form').validate({

  // Callback
  eachField : $.noop,

  // Callback
  eachInvalidField : $.noop,

  // Callback
  eachValidField : $.noop,

  // Callback
  invalid : $.noop,

  // Callback
  valid : $.noop,

});

---

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