Tag: ParsleyJS Cheat Sheet

This cheat sheet will help you using ParsleyJS. Parsley is a javascript form validation library. It helps you provide your users with feedback on their form submission before sending it to your server. It saves you bandwidth, server load and it saves time for your users.

Parsley: Form Cheat Sheet

Options

Property	Default	Description
`data-parsley-namespace`	`data-parsley-`	Choose the DOM-API you want to use for Parsley.
`data-parsley-validate`		Bind Parsley validation to the form and its items with validation constraints
`data-parsley-priority-enabled`	`true`	Either validate higher priority constraints first and stop on first failure (`true`), or validate all constraints simultaneously and show all the failing ones (`false`).
`data-parsley-inputs`	`input,` `textarea,` `select`	When looking for fields within a form, Parsley uses this selector. The fields found will then be filtered using the `excluded` option below.
`data-parsley-excluded`	`input[type=button],` `input[type=submit],` `input[type=reset],` `input[type=hidden]`	Form fields that won’t be validated by Parsley.
`parsley-use-html5-constraints`	`true`	Bind or not supported HTML5 tags
`parsley-show-errors`	`true`	Choose to show or not Parsley error messages & success / errors classes
`parsley-focus`	`first`	Specify which field will be focused first on form validation errors. `first`, `last` and `none` allowed

Methods

Method	Returns	Description
`whenValid({group, force})`	`promise`	Returns a jQuery promise that will be fulfilled if and only if the Form is valid. Does not affect UI nor fires events.
`isValid({group, force})`	`boolean or null`	Similar to `whenValid` but returns `true` if the promise is already fulfilled, `false` if already rejected, and `null` if the validation is still pending.
`whenValidate({group, force})`	`promise`	Validate form. Prevents submission if not valid. Fires events and affects UI. You can only validate a certain group of fields by specifying optional `group` string parameter. If `group` is given, it only validates fields that belong to this group.
`validate({group, force})`	`boolean or null`	Same as `whenValidate` except it returns `true` if the promise is already fulfilled, `false` if already rejected, and `null` if the validation is still pending.
`refresh()`		Forces a refresh of the form and its field. Parsley always refreshes before validation, but this may be helpful for dynamic changes that need to be applied immediately
`reset()`		Reset UI for this form and for its fields.
`destroy()`		Disable and destroy Parsley for this form and its fields

Parsley: Field Cheat Sheet

Options

Set a specific field value for Parsley validation, dissociated from the real one:

data-parsley-value

Assign a group to a field for specific group validation:

data-parsley-group

Add this attribute to radio / checkboxes elements:

data-parsley-multiple

A field is by default not validated if it is not required and empty:

data-parsley-validate-if-empty

Perform actions on whitespace in value (only for Parsley validation):

data-parsley-whitespace

Add parsley-success and parsley-error classes on field, but no error message:

data-parsley-errors-messages-disabled

Postpones validation for a given number of milliseconds after user input has stopped arriving:

data-parsley-debounce

Methods

Method	Returns	Description
`isValid({force})`	`true` if all ok `null` if some validations are still pending `[Violation, ...]]` if fails	Returns if the field is valid or not. Does not affect UI nor fires events. If `force` is set, it forces validation even on non-required fields
`validate({force, group})`	`true` if all ok `null` if some validations are still pending `[Violation, ...]]` if fails	Validate Field. Fires events and affects UI. If `force` is set, force validate even non required fields
`getErrorsMessages()`	`array`	Returns an array of field’s error messages
`reset()`		Reset UI for this field.
`destroy()`		Disable and destroy Parsley for this field.

Parsley: Built-in validators Cheat Sheet

Built-in validators list

Name	API	Description
Required	`required` `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	`type="email"` `data-parsley-type="email"`	Validates that a value is a valid email address.
Number	`data-parsley-type="number"`	Validates that a value is a valid number according to the given `step`, `min` and original `value`. The default `step` for HTML5 is “1”, which is so counterintuive that Parsley uses a default `step` of “any” for `data-parsley-type="number"`.
Integer	`type="number"` `data-parsley-type="integer"`	Validates that a value is a valid integer.
Digits	`data-parsley-type="digits"`	Validates that a value is only digits.
Alphanum	`data-parsley-type="alphanum"`	Validates that a value is a valid alphanumeric string.
Url	`type="url"` `data-parsley-type="url"`	Validates that a value is a valid url.
Minlength	`minlength="6"` `data-parsley-minlength="6"`	Validates that the length of a string is at least as long as the given limit.
Maxlength	`maxlength="10"` `data-parsley-maxlength="10"`	Validates that the length of a string is not longer than the given limit.
Length	`data-parsley-length="[6, 10]"`	Validates that a given string length is between some minimum and maximum value.
Min	`min="6"` `data-parsley-min="6"`	Validates that a given input (number or date) or date is greater than or equal to some minimum (number or date.)
Max	`max="10"` `data-parsley-max="10"`	Validates that the given input (number or date) is less than or equal to some maximum value (number or date).
Range	`type="range"` `data-parsley-range="[6, 10]"`	Validates that a given value (number or date) is between some minimum and maximum values (numbers or dates).
Pattern	`pattern="\d+"` `data-parsley-pattern="\d+"`	Validates that a value matches a specific regular expression (regex).
MinCheck	`data-parsley-mincheck="3"`	Validates that a certain minimum number of checkboxes in a group are checked.
MaxCheck	`data-parsley-maxcheck="3"`	Validates that a certain maximum number of checkboxes in a group are checked.
Check	`data-parsley-check="[1, 3]"`	Validates that the number of checked checkboxes in a group is within a certain range.
Equalto	`data-parsley-equalto="#anotherfield"`	Validates that the value is identical to another field’s value (useful for password confirmation check).

Type Constraints

Name	API	Description
Email	`parsley-type="email"` `type="email"`	Validates that a value is a valid email address.
Url	`parsley-type="url"` `type="url"`	Validates that a value is a valid url.
Url strict	`parsley-type="urlstrict"`	Validates that a value is a valid strict URL, ie: with one of `http`, `https`, `ftp`, `git` allowed protocols.
Digits	`parsley-type="digits"`	Validates that a value is only digits.
Number	`parsley-type="number"` `type="number"`	Validates that a value is a valid number.
Alphanum	`parsley-type="alphanum"`	Validates that a value is a valid alphanumeric string.
Date Iso	`parsley-type="dateIso"`	Validates that a value is a valid ISO date.
Phone `tel`	`parsley-type="phone"`	Validates that a value is a valid phone number.

Extra Validators

The list of parsley.extra validators

Name	Api	Description
Min Words	`parsley-minwords="6"`	Validate that a field has at least 6 words.
Max Words	`parsley-maxwords="6"`	Validate that a field has 6 words maximum.
Range Words	`parsley-rangewords="[6,10]"`	Validate that a field has between 6 and 10 words.
Greater Than	`parsley-greaterthan="#elem"`	Validate that a field’s value is greater than #elem’s value.
Less Than	`parsley-lessthan="#elem"`	Validate that a field’s value is lower than #elem’s value.
Before date	`parsley-beforedate="#elem"`	Validate that a field’s date is before #elem’s date.
On or before date	`parsley-onorbeforedate="#elem"`	Validate that a field’s date is on or before #elem’s date.
After date	`parsley-afterdate="#elem"`	Validate that a field’s date is after #elem’s date.
On or after date	`parsley-onorafterdate="#elem"`	Validate that a field’s date is on or after #elem’s date.
In list	`parsley-inlist="foo, bar, foo bar"`	Validates that a field’s value is present within the value list. You can define the delimiter using `parsley-inlist-delimiter=","`. Delimiter defaults to `","`.
Luhn	`parsley-luhn="true"`	Validates that a fields value passes the Luhn algorithm. Validates credit card numbers, as well as some other kinds of account numbers.
American Date	`parsley-americandate="true"`	Validates that a value is a valid American Date. Allows for slash, dot and hyphen delimiters and condensed dates (e.g., M/D/YY MM.DD.YYYY MM-DD-YY).

Parsley: Validators Cheat Sheet

Validating function

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
`validateDate`	Define this to create date values. Parsley will parse the input’s value and pass the date, or reject the value if it’s not an acceptable date.
`validateMultiple`	Is passed an array of values, in the case of checkboxes.

Requirement parameters

Value of `requirementType`	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
`'date'`	To be used for dates.
`'regexp'`	The 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.

Parsley.js: UI/UX Cheat Sheet

UI for form

UI Enabled:

Activate or deactivate UI

data-parsley-ui-enabled="false"

Focus:

Focus failing field on form validation. Possible values: 'first' | 'last' | 'none'

data-parsley-focus="first"

UI for field

Trigger:

data-parsley-trigger="input"

Trigger After Failure:

Default is 'input'

data-parsley-trigger-after-failure="focusout"

No focus:

data-parsley-no-focus

Validation threshold:

data-parsley-validation-threshold="10"

Class handler:

data-parsley-class-handler="#element"

Errors container:

data-parsley-errors-container="#element"

Error message:

data-parsley-error-message="my message"

Validator error message:

data-parsley-`constraint`-message="my message"

UI for javascript

Add error:

addError(name, {message: , assert: , updateClass: true});

Update error:

updateError(name, {message: , assert: , updateClass: true});

Remove error:

removeError(name, {updateClass: true});

Parsley.js: Events Cheat Sheet

The API to listen to events:

$('#some-input').parsley().on('field:success', function() { // In here, `this` is the parlsey instance of #some-input });

Events List:

Name	Instance	Fired by	Description
`form:init`	`ParsleyForm`	`new Parsley()`	Triggered when a Form is bound for the first time.
`form:validate`	`ParsleyForm`	`.validate()`	Triggered when a form validation is triggered, before its validation.
`form:success`	`ParsleyForm`	`.validate()`	Triggered when a form validation is triggered, after its validation succeeds.
`form:error`	`ParsleyForm`	`.validate()`	Triggered when a form validation is triggered, after its validation fails.
`form:validated`	`ParsleyForm`	`.validate()`	Triggered when a form validation is triggered, after its validation finishes (with success or with errors).
`form:submit`	`ParsleyForm`	`submit()`	Triggered when after a form validation succeeds and before the form is actually submitted. Return `false` to interrupt submission.
`field:init`	`ParsleyField`	`new Parsley()`	Triggered when a Field is bound for the first time.
`field:validate`	`ParsleyField`	`.validate()`	Triggered when a field validation is triggered, before its validation.
`field:success`	`ParsleyField`	`.validate()`	Triggered when a field validation succeeds.
`field:error`	`ParsleyField`	`.validate()`	Triggered when a field validation fails.
`field:validated`	`ParsleyField`	`.validate()`	Triggered after a field is validated (with success or with errors).

Parsley.js: Options Cheat Sheet

Remote validator

data-parsley-remote

Reverse

data-parsley-remote-revers

Options

data-parsley-remote-options

Validator

data-parsley-remote-validator

Parsley.js: CSS Cheat Sheet

Default classes & templates

Auto added on each form item that has Parsley validation:

.parsley-validated

Auto added on each form item that has successfully passed validation:

.parsley-success

Auto added on each form item that did not pass Parsley validation:

.parsley-error

Auto added after each form item that did not pass Parsley validation. Container for errors <li>:

ul.parsley-error-list

Message displayed if constraint failed validation:

li.parsley-erro

Override

Change class names:

$('#form').parsley({ successClass: 'my-class-name', errorClass: 'still-my-class-name' });

Change class handler. Add parsley-success and parsley-error to direct parent:

$('#form').parsley( {
    errors: {
        classHandler: function ( elem, isRadioOrCheckbox ) {
            return $( elem ).parent();
        }
    }
} );

Change error container. For example, to have the error messages appear before the field with the error in a div with the class .parsley-container:

errors: {
    container: function (element, isRadioOrCheckbox) {
        var $container = element.parent().find(".parsley-container");
        if ($container.length === 0) {
            $container = $("<div class='parsley-container'></div>").insertBefore(element);
        }
        return $container;
    }
}

Advanced changes:

See errorsWrapper, errorElem error properties in Parsley default options.

Parsley: Form Cheat Sheet
Parsley: Field Cheat Sheet
Parsley: Built-in validators Cheat Sheet
Parsley: Validators Cheat Sheet
Parsley.js: UI/UX Cheat Sheet
Parsley.js: Events Cheat Sheet
Parsley.js: Options Cheat Sheet
Parsley.js: CSS Cheat Sheet

Options

Methods

Options

Methods

Built-in validators list

Type Constraints

Extra Validators

Validating function

Requirement parameters

UI for form

UI for field

UI for javascript

Table of contents