### Parsley

Tweet

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

Full Name * : Email * : Website : Message (20 chars min, 100 max) :
validate

#### Oh snap!

This form seems far to be valid :(

#### Yay!

Everything seems to be ok :)

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