Skip jQuery validation when div element is hidden

Question

So I have encountered the following issue and I would appreciate if someone could point me in the right direction.

I have created a multi-part registration form at http://192.99.201.241/~alumni/register/ and have used the following code to split the form into sections.

    jQuery(document).ready(function() {

/*
    Form
*/
$('.registration-form fieldset:first-child').fadeIn('slow');

$('.registration-form input[name="s2member_pro_stripe_checkout[first_name]"], .registration-form input[name="s2member_pro_stripe_checkout[last_name]"], .registration-form input[type="password"], .registration-form input[name="s2member_pro_stripe_checkout[username]"], .registration-form input[name="s2member_pro_stripe_checkout[email]"], .registration-form input[name="s2member_pro_stripe_checkout[custom_fields][degree]"], .registration-form input[name="s2member_pro_stripe_checkout[custom_fields][year]"], .registration-form input[name="s2member_pro_stripe_checkout[custom_fields][dob]"]').on('focus', function() {
    $(this).removeClass('input-error');
});

// next step
$('.registration-form .next').on('click', function() {
    var parent_fieldset = $(this).parents('fieldset');
    var next_step = true;

    parent_fieldset.find('input[name="s2member_pro_stripe_checkout[first_name]"], input[name="s2member_pro_stripe_checkout[last_name]"], input[name="s2member_pro_stripe_checkout[username]"], input[type="email"], input[type="password"], input[name="s2member_pro_stripe_checkout[custom_fields][degree]"], input[name="s2member_pro_stripe_checkout[custom_fields][year]"], input[name="s2member_pro_stripe_checkout[custom_fields][dob]"]').each(function() {
        if( $(this).val() == "" ) {
            $(this).addClass('input-error');
            next_step = false;
        }
        else {
            $(this).removeClass('input-error');
        }
    });

    if( next_step ) {
        parent_fieldset.fadeOut(400, function() {
            $(this).next().fadeIn();
        });
    }

});

// previous step
$('.registration-form .previous').on('click', function() {
    $(this).parents('fieldset').fadeOut(400, function() {
        $(this).prev().fadeIn();
    });
});

});

When you are at section two of the form, there is a question What you like to register as. If you pick non-alumnus option, Your Degree, Year of Graduation, Alumni Number and LinkedIn will be hidden (div elements wrapped around those fields will be set to display none). However, when you hit Next you won't be able to proceed further because Your Degree and Year of Graduation are required fields. In other words, I would like to skip validation of those two fields when they are hidden.

Thanks.

Answer 1

The simplest way to remove validation for hidden fields is to add disabled attribute to them.

var $div2 = $('div#2');
$div2.hide();

$('input, select, textarea', $div2).attr('disabled', 'disabled');

Answer 2

you can check if element is visible or not using .is(':visible') method so seems your loop goes like

parent_fieldset.find('input[name="s2member_pro_stripe_checkout[first_name]"], input[name="s2member_pro_stripe_checkout[last_name]"], input[name="s2member_pro_stripe_checkout[username]"], input[type="email"], input[type="password"], input[name="s2member_pro_stripe_checkout[custom_fields][degree]"], input[name="s2member_pro_stripe_checkout[custom_fields][year]"], input[name="s2member_pro_stripe_checkout[custom_fields][dob]"]').each(function() {
        if( $(this).val() == "" && $(this).is(':visible') ) {
            $(this).addClass('input-error');
            next_step = false;
        }
        else {
            $(this).removeClass('input-error');
        }
    });