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?

Malmsey

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;
    }
});

Locality

Great answer, saved me a good amount of time. I think it's pretty elegant given you're working on a plugin... – Cowpuncher

I would add that you want to be careful using this, as you will want to wipe the validation instances if you toggle the visibility of the hidden field(s) back to visible. – Cowpuncher

@Potherca: thanks for your update. I tried to test it but I was using version 2.0.7 instead of 2.1.2 (cdnjs.com doesn't have the latest version) and that's why I rolled back your edit. After digging deeper I realized it was something to do with version 2.1 and I tweaked your edit a bit. Thanks! – Quasijudicial

Should we use "$.on" instead of "$.listen"? Cannot find documentation for listen method. – Motivity

@Andrey The $.listen was deprecated (as per this comment). Use Parsley.on() instead. I've updated the answer. Thanks! – Quasijudicial