Parsley – Powerful JavaScript based form validation library with lots of built-in validators
Parsley, Powerful JavaScript form validation library
Validating forms frontend have never been so powerful and easy.
Intuitive DOM API
Like no other form validation library, simply write in English your requirements inside your form HTML tags, Parsley will do the rest! No need to write even a single JavaScript line for simple form validation.
Dynamic form validation
Parsley is now smarter, it automatically detects your forms’ modifications and adapts its validation accordingly. Simply add, remove or edit fields, Parsley validation will follow!
Tons of built-in validators
Parsley is shipped with more than a dozen useful validators. If not enough, use the awesome Parsley extra Ajax validator or tons of other extended validators provided by the community.
UX focused
Parsley strongly focuses on #UI and #UX. Override almost every Parsley default behavior to fit yourexact needs.
Super reliable
Still shipped almost bug free. Parsley is strongly tested, and aimed to work on every browser since IE7.
Free
Parsley is Open Source, MIT licensed, and developed to help everyone. It will stay that way. Join us on Github!
Built-in validators
Overview
A validator is a method to determine if a given value (or sometimes sets of values) is acceptable or not, given some requirement parameters.
Parsley comes with many builtin validators and provides tools to specify your own.
Builtin validators list
These validators are shipped in parsley.js. Have a look at the Parsley Remote plugin and Parsley Extras for more validators.
Custom Validators
Craft yours
Of course, Parsley built-in validators are commonly used validators, and you’ll need some more that fit your specific forms and validations. That’s why Parsley lets you easily create your own validators.
The preferred way to register them (after parsley.js is loaded) looks like:
<input type="text" data-parsley-multipleof="3" />[...]<script type="text/javascript">window.Parsley .addValidator('multipleof', { requirementType: 'integer', validateNumber: function(value, requirement) { return 0 === value % requirement; }, messages: { en: 'This value should be a multiple of %s', fr: 'Cette valeur doit être un multiple de %s' } );</script>The following sections go over the details on how to define a custom validator
Validating function
There are many ways a validator can specify how to validate data:
| Name | Description |
|---|---|
validateString | Is passed the input’s value as a string. |
validateNumber | Use this instead of validateString when only numeric values are acceptable. Parsley will parse the input’s value and pass the number, or reject the value if it’s not an acceptable number |
validateMultiple | Is passed an array of values, in the case of checkboxes. |
Your custom validator must specify at least one of these. If it can validate both single inputs and multiple (i.e. checkboxes), then you can specify validateMultiple and one of the other two.
Validating functions should return either true if the value is valid, or false otherwise. It can instead return a promise that will be resolved if the value is valid, or be rejected otherwise.
Requirement parameters
You can specify what kind of requirement parameter your custom validator is expecting:
requirementKind | Description |
|---|---|
string | The most generic kind; requirement passed as is, with no checking. |
integer | For integers only (e.g. used by minlength) |
number | To be used when decimal numbers are acceptable |
regexp | Requirement can be either a full regexp string (e.g. /hel+o/i) or just a simple expression (e.g. hel+o) |
boolean | Any value other than "false" will be considered to true, including the empty string. This is so data-parsley-required and data-parsley-required=true be treated the same way. |
You can also specify an array of these kinds. For example, if a validator has requirementKind: ['integer', 'integer'], then given the requirement string "[1, 2]" it will receive 1 and 2 as second and third arguments (the first one being the value(s) to validate).
For even cases where more complex parameters are needed, you can specify extra parameters; refer to the source and check how the remote validator uses that.
Error messages
You can specify error messages, in as many locales as desired, using the messages option.
This is equivalent to calling addMessage for each locale.
Parsley Extras
You’ll find in the src/extra/ directory in Parsley .zip or Github projects many more or less useful validators crafted by the community. A doc here is coming.
Validators list
| Name | API | Description | ||||
|---|---|---|---|---|---|---|
| Greater than #2.0 |
| Validates that the value is greater than another field’s value or some strict minimum number. | ||||
| Greater than or equal to #2.0 |
| Validates that the value is greater than or equal to another field’s value or some minimum number. | ||||
| Less than #2.0 |
| Validates that the value is less than another field’s value or some strict maximum number. | ||||
| Less than or equal to #2.0 |
| Validates that the value is less than or equal to another field’s value or some minimum number. | ||||
| Minwords #2.0 |
| Validates that the value have at least a certain amount of words | ||||
| Maxwords #2.0 |
| Validates that the value have a maximum of a certain amount of words | ||||
| Words #2.0 |
| Validates that the value is within a certain range of words |
Website:http://parsleyjs.org/
Examples: http://parsleyjs.org/doc/examples.html
Thanks for reading,
Nabeel Shahid.
Recent Comments