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.

APECE · Accepted Answer · 2016-11-04 07:07:42Z

3

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

edited Nov 4, 2016 at 7:07

answered Oct 21, 2016 at 11:36

APECE

12510 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sagar Rabadiya · Accepted Answer · 2016-10-21 11:37:45Z

1

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

answered Oct 21, 2016 at 11:37

Sagar Rabadiya

4,3211 gold badge24 silver badges28 bronze badges

1 Comment

Sagar Rabadiya Over a year ago

mark the answer as correct so other user can get help.. :)

Collectives™ on Stack Overflow

Skip jQuery validation when div element is hidden

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related