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

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

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).
<textarea id="message" class="form-control" name="message" data-parsley-trigger="keyup" data-parsley-minlength="20" data-parsley-maxlength="100" data-parsley-minlength-message="Come on! You need to enter at least a 20 character comment.." data-parsley-validation-threshold="10"></textarea>

Changelog:

2021-11-22

  • v2.9.2

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