Question

所以我遇到了以下问题，如果有人能指出我正确的方向，我将不胜感激。

我在http://192.99.201.241/~alumni/register/创建了一个多部分注册表单，并使用以下代码将表单拆分为多个部分。

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

});

当你在表格的第二部分时，有一个问题你想注册的是什么。如果您选择非校友选项，您的学位，毕业年份，校友编号和LinkedIn将被隐藏（围绕这些字段的div元素将被设置为不显示）。但是，当您点击“下一步”时，您将无法继续前进，因为您的学位和毕业年份是必填字段。换句话说，我想在隐藏它们时跳过对这两个字段的验证。

感谢。

Answer 1

删除隐藏字段验证的最简单方法是向其添加禁用属性。

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

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

Answer 2

您可以使用.is（＆＃39;：visible＆＃39;）方法检查元素是否可见，所以看起来您的循环就像

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

隐藏div元素时跳过jQuery验证

2 个答案: