How to validate your forms with Parsley.js

Published at 07-01-2015 19:30 | Created by Luís Cruz | Category: Javascript
Clique aqui para ver a versão Portuguesa

In the contact form of your site or your application's forms, its 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: at the this post )

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:

AttributeDescription
required
data-parsley-required
data-parsley-required="true"
Requires the field to be filled
type="email"
data-parsley-type="email"
Checks if the field is a valid email address
data-parsley-type="number" Checks if the fiels has a numeric value
data-parsley-length="[10, 50]" Checks if the field's size has more than 10 characters and less than 50
data-parsley-equalto="#outroinput" Validates that the field value is equal to the field in #outroinput. This is especially useful for password confirmation

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 http://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 at GitHub in the following address https://github.com/guillaumepotier/Parsley.js/tree/master/src/i18n.

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.

 

Click here to keep reading about Parsley and its custom validations