Powerful Javascript Form Validation – Parsley.js

Parsley.js is a powerful, lightweight, simple, customizable and UX focused javascript library for validating form values when submitting. It takes use of javascript and HTML5 data-* attributes to create your own form validator without writing any javscript code.

Demo & Document


Powerful Javascript Form Validation - Parsley js

How to use it:

Include parsley.js script at the bottom of your page

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

Create a html form with validation

<form id="demo-form" data-validate="parsley">
    <label for="fullname">Full Name * :</label>
    <input type="text" id="fullname" name="fullname" data-required="true" />
    <label for="email">Email * :</label>
    <input type="text" id="email" name="email" data-trigger="change" data-required="true" data-type="email" />
    <label for="website">Website :</label>
    <input type="text" id="website" name="website" data-trigger="change" data-type="url" />
    <label for="message">Message (20 chars min, 200 max) :</label>
    <textarea id="message" name="message" data-trigger="keyup" data-rangelength="[20,200]"></textarea>

Style your form using CSS.

Leave a Reply

Don’t miss out on the latest freebies!

Sign up for my newsletter to receive the latest freebies from the design world. No spam, we promise!