Custom validations with Parsley.js

So you’ve read the basic Parsley usage and it’s 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 I’ll show you how to use custom validations, build by you. I’ll also show you how to submit your form via AJAX when it’s validated by Parsley.

Lets start by submitting the form through jQuery’s AJAX.

$(document).ready(function() {
    $("form[name=myForm]").parsley();

    $("form[name=myForm]").on('submit', function(e) {
        var f = $(this);
        f.parsley().validate();

        if (f.parsley().isValid()) {
            alert('This form is valid');
            $.ajax({
                url: f.attr('action'),
                data: f.serialize(),
                type: 'post',
                dataType: 'json',
                success: function(response) {
                    alert('Congrats! Your form was successfully submitted.');
                },
                error: function() {
                    alert('Crap! There was something wrong.');
                }
            });
        } else {
            alert('This form isn't valid');
        }

        e.preventDefault();
    });
});

As you can see, we are binding Parsley to the form through $("form[name=myForm]").parsley();. Also, we need to pass a closure function to the form submit event in order to control what will happen when you submit the form.

Inside this closure we validate the form with Parsley with $(this).parsley().validate();. Parsley takes care of the field validations and displayes the error messages (if any). After this step we still need to make sure the validation was successful in order the perform the AJAX request.

You can check if the validation was successful by using the following code $(this).parsley().isValid() which returns true if the form is valid or false if it’s invalid. Notice that this code works for the latest version (2.x). If you’re still using 1.x, it’s a little different.

From my experience, it’s better if you submit your form via AJAX (when you can). Aside from being faster (because it avoids unnecessary reloads), you don’t have to fill the inputs with the previous data when the form isn’t validated by the server.

Parsley also allows you to create your own custom validations. One of the best examples on why you should care, is the registry form. Imagine that you have a registry form and you ask the user for his username. If the username already exists in the database, you have to tell the user to choose another username. In this situations you can use Parsley’s custom validations.

Custom validations are defined in Javascript and you can create your custom validation before or after the library has been loaded. For this examples I’ll create the custom validation after the library is included in the page.

See the Pen Parsley 2.0 - Registry form by Luís Cruz (@milz) on CodePen.

As you can see, the custom validation is created by using window.ParsleyValidator.addValidator('customValidation', function(value, requirement)). After that, you should add an attribute to the input that you want to validate, like this data-parsley-customValidation (take a look at the username field).

In this custom validation, I have an AJAX request to the server, which passes the username field through $_GET. At the server side you should query the database with the given value to check its existence. If it exists you should return a HTTP response 404 code (actually, you can use any code that starts with 4). If the username doesn’t exists (which means the field is valid), the server should return a 200 code with the response.

Two parameters are passed to the addValidator closure, value and requirement. The value is the value of the input and the requirement (which I haven’t used in the example) can be used to pass another values. If you take a look at the documentation’s example you can see that it receives the value 3 to check if the value is multiple of 3.

If you need to use the requirement you should set some value to the input’s attribute (something like data-parsley-something='1234'). Sometimes it’s useful to access another input or element inside the validation and you can do that if you pass one input’s selector. If you use data-parsley-something='input[name=email]', you can access the input email in your validation through jQuery.

Confused with this and want an introduction to Parsley.js? Take a look at the previous post.