Parsley – Powerful JavaScript based form validation library with lots of built-in validators

0
193

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.

View example »

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!

View example »

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.

View details »

UX focused

Parsley strongly focuses on #UI and #UX. Override almost every Parsley default behavior to fit yourexact needs.

View documentation »

Super reliable

Still shipped almost bug free. Parsley is strongly tested, and aimed to work on every browser since IE7.

View tests »

Free

Parsley is Open Source, MIT licensed, and developed to help everyone. It will stay that way. Join us on Github!

View license »

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

Name API Description
Required #2.0
required HTML5
data-parsley-required
data-parsley-required="true"
data-parsley-required="false"
Validates that a required field has been filled with a non blank value. If data-parsley-required="false", validator is deactivated and the field is not required.
Email #2.0
type="email" HTML5
data-parsley-type="email"
Validates that a value is a valid email address.
Number #2.0 data-parsley-type="number" Validates that a value is a valid number.Warning!HTML5 type="number" is bound with the belowinteger validator, but for browsers that support it, the value accessible from javascript in case of invalid input is "", so you will never get an error (unless it is alsorequired).
Integer #2.0
type="number" HTML5
data-parsley-type="integer"
Validates that a value is a valid integer.
Digits #2.0 data-parsley-type="digits" Validates that a value is only digits.
Alphanum #2.0 data-parsley-type="alphanum" Validates that a value is a valid alphanumeric string.
Url #2.0
type="url" HTML5
data-parsley-type="url"
Validates that a value is a valid url.
Minlength #2.0
minlength="6" HTML5
data-parsley-minlength="6"
Validates that the length of a string is at least as long as the given limit.
Maxlength #2.0
maxlength="6" HTML5
data-parsley-maxlength="6"
Validates that the length of a string is not longer than the given limit.
Length #2.0 data-parsley-length="[6, 10]" Validates that a given string length is between some minimum and maximum value.
Min #2.0
min="6" HTML5
data-parsley-min="6"
Validates that a given number is greater than or equal to some minimum number.
Max #2.0
max="10" HTML5
data-parsley-max="6"
Validates that a given number is less than or equal to some maximum number.
Range #2.0
type="range" HTML5
data-parsley-range="[6,10]"
Validates that a given number is between some minimum and maximum number.
Pattern #2.0
pattern="\d+" HTML5
data-parsley-pattern="\d+"
Validates that a value matches a specific regular expression (regex).
MinCheck #2.0 data-parsley-mincheck="3" Validates that a certain minimum number of checkboxes in a group are checked.
MaxCheck #2.0 data-parsley-maxcheck="3" Validates that a certain maximum number of checkboxes in a group are checked.
Check #2.0 data-parsley-check="[1, 3]" Validates that the number of checked checkboxes in a group is within a certain range.
Equalto #2.0 data-parsley-equalto="#anotherfield" Validates that the value is identical to another field’s value (useful for password confirmation check).

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
data-parsley-gt="#anotherfield"
data-parsley-gt="6"
Validates that the value is greater than another field’s value or some strict minimum number.
Greater than or equal to #2.0
data-parsley-gte="#anotherfield"
data-parsley-gte="6"
Validates that the value is greater than or equal to another field’s value or some minimum number.
Less than #2.0
data-parsley-lt="#anotherfield"
data-parsley-lt="6"
Validates that the value is less than another field’s value or some strict maximum number.
Less than or equal to #2.0
data-parsley-lte="#anotherfield"
data-parsley-lte="6"
Validates that the value is less than or equal to another field’s value or some minimum number.
Minwords #2.0
data-parsley-minwords="200"
Validates that the value have at least a certain amount of words
Maxwords #2.0
data-parsley-maxwords="200"
Validates that the value have a maximum of a certain amount of words
Words #2.0
data-parsley-words="[200, 600]"
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,
Web Editor

LEAVE A REPLY

Please enter your comment!
Please enter your name here

six − 2 =