Parsley

Simple form example *

* Please, note that this demo form is not a perfect example of UX-awareness. The aim here is to show a quick overview of parsley-API and Parsley customizable behavior.

validate
<form id="demo-form" data-parsley-validate>

  <label for="fullname">Full Name * :</label>
  <!-- this field is just required, it would be validated on form submit -->
  <input type="text" name="fullname" required />

  <label for="email">Email * :</label>
  <!-- this required field must be an email, and validation will be run on
  field change -->
  <input type="email" name="email" data-parsley-trigger="change" required />

  <label for="message">Message (20 chars min, 100 max) :</label>
  <!-- this optional textarea have a length validator that would be checked on keyup after 10 first characters, with a custom message only for minlength validator -->
  <textarea name="message" data-parsley-trigger="keyup" data-parsley-length="[20, 100]" data-parsley-validation-threshold="10" data-parsley-minlength-message = "Come on! You need to enter at least a 20 caracters long comment.."></textarea>

  <input type="submit" />
</form>

Using Events to make complex validations

Sometimes, regular validators and regular Parsley validation process is not enough for your forms. See how you could leverage Parsley events to make incredible validations!

View example »

A multi steps form with Parsley validation

Sometimes, you'll need to split long and fastidious forms in multiple parts. See how you could leverage Parsley groups to easily validate this multi steps form, step by step.

View example »