How to validate your forms with Parsley.js

In the contact form of your site or your application’s forms, it’s essential to use form validation.

There was a time when a form was submitted and there were errors and the user had to provide all the information. These days this is unnacceptable and a serious issue regarding to user experience and usability.

In this post we are going to introduce you to Parsley.js, a lightweight and flexible form validation Javascript library that relies on jQuery.

You can bound Parsley to your forms through HTML attributes or Javascript. In the following example we show you how to validate if a field is filled simply by adding the attribute data-parsley-validate to your form and the attribute required (HTML5) to your field. If you try to submit the form with no value in the field, you’ll get an error message stating “This value is required”.

See the Pen Parsley 2.0 - Validação DOM by Luís Cruz (@milz) on CodePen.

Personally I prefer to bind Parsley with Javascript since you might need custom validations (take a look at custom validations with parsley) or you want to change some default options. You can use the following code to attach Parsley to your form:

See the Pen Parsley 2.0 - Validação via Javascript by Luís Cruz (@milz) on CodePen.

Parsley has a few built-in validators for the most common cases. The full list can be can be seen in the docs. The most common validations are:

In the following example we show you a contact form, where you can see multiple validations in use. Note that Parsley 2.x doesn’t require you to include a CSS file. You can still use the CSS for version 1, available at https://parsleyjs.org/src/parsley.css.

See the Pen Parsley 2.0 - Formulário de contacto by Luís Cruz (@milz) on CodePen.

Now you are able to validate your forms and to use the built-in validations. However, the localization of the error messages is in english and you might want to change that. To change the localization (i18n) you need to include the specific Javascript files. The localization files can be downloaded from GitHub.

After you download the localization there are two ways to use them:

1. Load the localization files before the library. You can add as much localization files as you want. After you add Parsley’s Javascript, you need to choose which localization should be used through this code window.ParsleyValidator.setLocale('pt-br');. In the following code we include both Brazilian Portuguese and Spanish localizations. After the library is loaded we set choose to set the localization to Brazilian Portuguese.

   <script src="jquery.js"></script>
   <script src="i18n/pt-br.js"></script>
   <script src="i18n/es.js"></script>
   <script src="parsley.min.js"></script>
   <script type="text/javascript">
       window.ParsleyValidator.setLocale('pt-br');
   </script>

2. Another way is to load the localization files after you load the library. In this case the active localization will always be the last one to be loaded (in the following code it will be Spanish).

   <script src="jquery.js"></script>
   <script src="parsley.min.js"></script>
   <script src="i18n/pt-br.js"></script>
   <script src="i18n/es.js"></script>

Ok, this is all fine and dandy but what if you want to change the error message of a specific field? You can do this with the attribute data-parsley-error-message. In the following code we change the localization to Brazilian Portuguese and set specific messages to the fields Nome and Mensagem.

See the Pen Parsley 2.0 - Formulário de contacto by Luís Cruz (@milz) on CodePen.

This is the basic usage of Parsley, if you need use custom validations check out the following post.