Change date format with Javascript

3
Feb
2015

Inserting data into forms is one of the most trivial tasks for any application. Most of the data is simple like inputs, radio buttons, checkboxs or textareas.

There are, however, some field types that have been causing controversy about the best way to fill those fields. In this post we talk about date fields and how you can format the input in order to provide an easy-to-use application.

A lot has changed since the first datepicker was introduced. However, we keep working with applications that aren't easy to use and the users struggle to fill date fields in the correct format.

Events and objects in Parsley.js

10
Jan
2015

Sometimes it's useful to trigger some actions when your form of field is validated.

Parsely 2.x allows you to use trigger events to this end. Events can be used to change DOM elements or to get access to the list of error messages for the form of fields. We'll also take a look at the objects created by Parsley and how do they work.

Custom validations with Parsley.js

8
Jan
2015

So you read the basic Parsley usage and its enough for simple forms. Now you have a few more complex validations and you don't quite know how to get there.

In this case, take a look at this post where we show you how to use custom validations, build by you. We'll also show you how to submit your form via AJAX when its validated by Parsley.

How to validate your forms with Parsley.js

7
Jan
2015

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