Zeljko Radic Zeljko Radic - 1 month ago 9
Javascript Question

Skip jQuery validation when div element is hidden

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.

Sam Sam
Answer

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