Dynamic Feature-rich Form Validation Library For jQuery - Parsley.js

Dynamic Feature-rich Form Validation Library For jQuery - Parsley.js
File Size: 1.04 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Parsley.js is a powerful, feature-rich jQuery form validation plugin which can be used to dynamically validate form fields on client side before submitting.

Key features:

  • 18 built-in validation patterns.
  • Easy to create your own validators.
  • Allows for remote validators via AJAX requests.
  • Supports more than 67 languages.
  • Tons of configuration options, api methods and events.

How to use it:

1. Load jQuery library and the main script 'Parsley.js' in the document and the Parsley library is ready for use.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/parsley.min.js"></script>

2. Load a localization file of your choice after the 'Parsley.js'.

<script src="i18n/ar.js"></script>
<script src="i18n/ca.js"></script>
...

3. Load the es5-shim for the cross-browser support (IE <= 8).

<script src="/path/to/es5-sham.min.js"></script>

4. To initialize the plugin, just add the 'data-parsley-validate' attribute to your html form as this:

<form data-parsley-validate>
  ...
</form>

5. Or initialize it manually:

$('#form').parsley();

6. Add the validators to your form fields using data attributes as listed below:

  • data-parsley-required: or 'require', data-parsley-required="true", data-parsley-required="false". If is required.
  • data-parsley-type="email": or type="email". If is email address
  • data-parsley-type="number": if is a valid number according to the given step, min and original value. 
  • data-parsley-type="integer": or type="number". If is a valid integer.
  • data-parsley-type="digits": If is only digits.
  • data-parsley-type="alphanum": is a valid alphanumeric string.
  • data-parsley-type="url": or type="url". If is a valid url.
  • data-parsley-minlength="6": or minlength="6". Set the min length.
  • data-parsley-maxlength="6": or maxlength="6". Set the max length.
  • data-parsley-length="[6, 10]": If is between some minimum and maximum value.
  • data-parsley-min="6": or min="6". Set the min value.
  • data-parsley-max="6": or max="6". Set the max value.
  • data-parsley-range="[6, 10]": or type="range". Set the value range.
  • data-parsley-pattern="\d+": or pattern="\d+". If a value matches a specific regular expression
  • data-parsley-mincheck="3": If a certain minimum number of checkboxes in a group are checked.
  • data-parsley-maxcheck="3": If a certain maximum number of checkboxes in a group are checked.
  • data-parsley-check="[1, 3]": If the number of checked checkboxes in a group is within a certain range.
  • data-parsley-equalto="#anotherfield": If the value is identical to another field's value (useful for password confirmation check).

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