Parsley Installation

Just include the Parsley.js file (with jQuery or Zepto with data and fx_methods modules added) or use Parsley standalone (with Zepto bundled inside)

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="parsley.js"></script>

<form data-validate="parsley">
  [...]
</form>

Parsley Form

This is the main Parsley form validation factory, where you decide if a form is validated, and set some extra options.

<form data-validate="parsley"></form>

Properties

Parsley Field

Once your form is validated by Parsley, add validation constraints and various other options.

<form data-validate="parsley">
    <input type="text" name="email" data-type="email" />
</form>

Properties

data-type="alphanum" data-rangelength="[10,10]"
data-error-message="You must enter a 10 characters alphanumeric value"

data-error-container="ul#myproperlabel li.someclass"

Extra Validators

There are some extra validators, not shipped along with default Parsley, because they're more specific and less common, and there is no need to add weight to Parsley instead of calling these validators only when needed. Just call parsley.extend.js or dist/parsley.extend.min.js like this:

<script type="text/javascript" src="parsley.extend.fr.js"></script>
<script type="text/javascript" src="parsley.js"></script>

Here is the list of parsley.extra validators

{
  // basic data-api overridable properties here..
  inputs: 'input, textarea, select'
  , excluded: 'input[type=hidden]'
  , trigger: false
  , focus: 'first'
  , validationMinlength: 3
  , successClass: 'parsley-success'
  , errorClass: 'parsley-error'
  , validators: {}
  , showErrors: true
  , messages: {}

  //some quite advanced configuration here..
  , validateIfUnchanged: false
  , errors: {                     // specify where parsley error-success classes are set
    classHandler: function ( elem, isRadioOrCheckbox ) {}
  , container: function ( elem, isRadioOrCheckbox ) {}
  , errorsWrapper: '<ul></ul>'
  , errorElem: '<li></li>'
  }
  , listeners: {
      onFieldValidate: function ( elem, ParsleyField ) { return false; }
    , onFormSubmit: function ( isFormValid, event, ParsleyForm ) {}
    , onFieldError: function ( elem, constraints, ParsleyField ) {}
    , onFieldSuccess: function ( elem, constraints, ParsleyField ) {}
  }
}

$( '#form' ).parsley( {
    validators: {
      multiple: function ( val, multiple ) {
        return val % multiple === 0;
      }
    }
  , messages: {
      multiple: "This value should be a multiple of %s"
    }
} );
<input type="text" data-multiple="3" />

$( '#form' ).parsley( 'addListener', {
    onFieldValidate: function ( elem ) {

        // if field is not visible, do not apply Parsley validation!
        if ( !$( elem ).is( ':visible' ) ) {
            return true;
        }

        return false;
    }
} );

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

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

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

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

$( '#form' ).parsley( 'addItem', '#itemid' );

$( '#form' ).parsley( 'removeItem', '#itemid' );

$( '#field' ).parsley( 'validate' );

$( '#field' ).parsley( 'addConstraint', { minlength: 2 } );

$( '#field' ).parsley( 'updateConstraint', { minlength: 6 } );

$( '#field' ).parsley( 'removeConstraint', 'minlength' );

More generally, in the Parsley API: All ParsleyForm and ParsleyItem functions can be publicly called using the following syntax:

$( '#parsleyFormOrFieldId' ).parsley( 'functionName', parameter );