Parsley JS 2.x - disabling validation for fields that are not visible

Question

I want to have Parsley not validate an input if it is not visible. I have a large multi-step survey that reveals new sections as you complete it. Each section is in its own tag, and within each form I can have multiple sections that reveal as you go through it. I am currently using 1.x, and this is how I do it now:

$('#' + formID).parsley({
            errors : {
                container: function(element) {
                    var $container = element.parent().find('parsley-container');
                    if($container.length === 0)
                    {
                        if($(element).hasClass('text-hide') && !$(element).hasClass('not-select'))
                        {
                            $(element).prev().addClass('is-error'); 
                        }
                        else
                        {
                            $container = $('<div class="parsley-container"></div>').insertAfter(element);
                        }
                    }
                    return $container;
                }
            },
            listeners: {
                onFieldValidate: function(elem) {
                    if(!$(elem).is(':visible'))
                    {
                        return true;
                    }
                    return false;
                }
            }

It is in the listeners section that I only validate fields that are visible. How can I do this in Parsley 2.x? I've been going through the documentation and I can't find an equivalent way of doing it. I know there are validation groups in 2.x, but is there a way to just do it like I did in 1.x?

Answer 1

The easiest solution is to exclude all the hidden inputs, like this:

$('#' + formID).parsley({
    excluded: "input[type=button], input[type=submit], input[type=reset], input[type=hidden], input:hidden"
});

This way the validation will only bind the visible inputs. However, this forces you to destroy and apply Parsley each time a input changes its visibility.

To avoid this you can use the following «not so elegant» solution. This code would be better in the 'parsley:field:validate' event, but I couldn't make it work.

Using the 'parsley:field:validated', the validation was already performed and now we change the validation result to true and hide the error container.

$('#' + formID).parsley();

$.listen('parsley:field:validated', function(fieldInstance){
    if (fieldInstance.$element.is(":hidden")) {
        // hide the message wrapper
        fieldInstance._ui.$errorsWrapper.css('display', 'none');
        // set validation result to true
        fieldInstance.validationResult = true;
        return true;
    }
});

---

As of Parsley 2.1.* the event parsley:field:validated throws the following message

Parsley's pubsub module is deprecated; use the corresponding jQuery event method instead

Instead of parsley:field:validated you should use the event field:validated

---

The latest versions have $.listen() deprecated. You should use Parsley.on() instead. Example:

Parsley.on('field:validated', function(fieldInstance){
    if (fieldInstance.$element.is(":hidden")) {
        // hide the message wrapper
        fieldInstance._ui.$errorsWrapper.css('display', 'none');
        // set validation result to true
        fieldInstance.validationResult = true;
        return true;
    }
});