Parsley JS

What is Parsley JS?

Parsley JS is a form validationn library. It is fast and keeps you from having to write any javascript validation code. Parsley validates the form values before they are sent to the server, allowing it to give imediate feedback to the user. It is as easy to use as bootstrap in your code.

Setting up Parsley JS

Parsley can be added to installed by using the following command in your terminal.

 npn install --save parsleyjs

In the opening form tag, you need to include data-parsley-validate="" so that it looks like

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

Using Parsley JS

To get Parsley to validate your form, you just have to enter attributes to the input tags. For example, if you want an input to be required you just need to add required="".

<label for="fullname">Full Name:</label>
<input type="text" class="form-control" name="fullname" required="">

The attributes don't need to be added to all of the elements to function. As long as the form elements share the same label, only one needs the the attributes. You can also minimum and maximum for form elements like checkboxes and text areas.

<label for="foods">Food Options (min 2, max 4)</label>
<p>
    Hamburger <input type="checkbox" name="foods[]" id="food1" value="hamburger" data-parsley-mincheck="2" data-parsley-maxcheck="4"><br>
    Hotdog <input type="checkbox" name="foods[]" id="food2" value="hotdog"><br>
    Apple <input type="checkbox" name="foods[]" id="food3" value="apple"><br>
    Banana <input type="checkbox" name="foods[]" id="food4" value="banana"><br>
    Broccoli <input type="checkbox" name="foods[]" id="food5" value="broccoli"><br>
    Carrot <input type="checkbox" name="foods[]" id="food6" value="carrot"><br>
</p>

<label for="message">Message (20 chars min, 100 max) :</label>
<textarea id="message" class="form-control" name="message" data-parsley-minlength="20" data-parsley-maxlength="100" required=""></textarea>

There are many more uses for Parsley and I recommend going to parsleyjs.org to learn more if this would be useful for you. Parsley does not replace server side validation but does does improve site performance by providing basic front end validation.