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
<!-- tell Parsley to validate this form and its fields -->
<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="website">Website :</label>
  <!-- this optional field must be an url, and have a custom html error
  message -->
  <input type="text" name="website"
  data-parsley-type="url"
  data-parsley-error-message="A <strong>real</strong> url pretty please" />

  <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>