Tips for Parsley [JS form validation]


Parsley is a HTML form validation library in JavaScript.

There are some advantages of Parsley:

  • No need to write JS code for simple form validation, it’s really easy.
  • It automatically detects user modification in input form and adapts its validation.

In this post, we would like to share basic knowledge when we used it in work.

Parsley validates input like this:

<script src="jquery.js"></script>
<script src="parsley.min.js"></script>

<form class="demo-form" data-parsley-validate>
<div class="first">
<label for="firstname">Firstname:</label>
<input type="text" class="form-control" name="firstname" data-parsley-length="[4, 20]" data-parsley-group="block1">

<label for="lastname">Lastname:</label>
<input type="text" class="form-control" name="lastname" data-parsley-length="[4, 20]" data-parsley-group="block1">
</div>
</form>

If you want to see more detail, please see Deomo.

🗻 Built-in validators

Parsley comes with many builtin validators and provides tools. Some of the validators are as follows:

Name API Description
Require data-parsley-required It validates that a field has filled with a non blank value
Equalto data-parsley-equalto="#anotherfield" It validates that the value is identical to another field’s value(e.g. Password confirmation check)

Have a look at Built-in validators | parsley for more validators.

🏈 Special Thanks

🖥 Recommended VPS Service

VULTR provides high performance cloud compute environment for you. Vultr has 15 data-centers strategically placed around the globe, you can use a VPS with 512 MB memory for just $ 2.5 / month ($ 0.004 / hour). In addition, Vultr is up to 4 times faster than the competition, so please check it => Check Benchmark Results!!