javascript - jQuery - 使用表单外的选项卡进行表单验证

Question

我正在使用FormValidation plugin for jQuery - 我正在尝试使用 Bootstrap 选项卡创建一个表单向导。这是我到目前为止的代码:

<form class="center-form" id="installationForm" method="post">
    <!-- Tab panes -->
    <div class="tab-content">
        <! -- #tab1 -->
        <div role="tabpanel" class="tab-pane active" id="details">
            <div class="form-group">
                <label>Title</label>
                <input type="text" class="ad-title form-control" name="title" value="" placeholder="Enter your advertisement title...">
            </div>

        </div>
        <! -- #tab1 end -->
        <! -- #tab2 -->
        <div role="tabpanel" class="tab-pane active" id="audience">
            <div class="form-group">
                <label>Description</label>
                <input type="text" class="ad-title form-control" name="description" value="" placeholder="Enter your advertisement title...">
            </div>
        </div>
        <! -- #tab2 end -->

    </div>
    <ul class="pager wizard">
        <li class="previous"><a href="javascript:void(0)">Previous</a>

        </li>
        <li class="next"><a href="javascript:void(0);">Next</a>

        </li>
    </ul>
</form>

<ul class="nav nav-tabs ad-creation" id="progress">
        <li class="active"> <a href="#details" data-toggle="tab" class="button btn-round">tab1</a></li>
        <li> <a href="#audience" data-toggle="tab" class="button btn-round">tab2</a></li>

还有我的 JavaScript:

$(document).ready(function() {
    $('#installationForm')
        .formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            // This option will not ignore invisible fields which belong to inactive panels
            excluded: ':disabled',
            fields: {
                name: {
                    validators: {
                        notEmpty: {
                            message: 'The site name is required'
                        }
                    }
                },
                url: {
                    validators: {
                        notEmpty: {
                            message: 'The URL is required'
                        },
                        uri: {
                            message: 'The URL is not valid'
                        }
                    }
                }
            }
        })
        .bootstrapWizard({
            tabClass: 'nav nav-pills',
            onTabClick: function(tab, navigation, index) {
                return validateTab(index);
            },
            onNext: function(tab, navigation, index) {
                var numTabs    = $('#progress').find('.tab-pane').length,
                    isValidTab = validateTab(index - 1);
                if (!isValidTab) {
                    return false;
                }

                if (index === numTabs) {
                    // We are at the last tab

                }

                return true;
            },
            onPrevious: function(tab, navigation, index) {
                return validateTab(index + 1);
            },
            onTabShow: function(tab, navigation, index) {
                // Update the label of Next button when we are at the last tab
                var numTabs = $('#progress').find('.tab-pane').length;
                $('#installationForm')
                    .find('.next')
                        .removeClass('disabled')    // Enable the Next button
                        .find('a')
                        .html(index === numTabs - 1 ? 'Install' : 'Next');

            }
        });

    function validateTab(index) {
        var fv   = $('#installationForm').data('formValidation'), // FormValidation instance
            // The current tab
            $tab = $('#installationForm').find('.tab-pane').eq(index);

        // Validate the container
        fv.validateContainer($tab);

        var isValidStep = fv.isValidContainer($tab);
        if (isValidStep === false || isValidStep === null) {
            // Do not jump to the target tab
            return false;
        }

        return true;
    }
});

现在 - 验证有效如果我将#progress移动到#installionForm表单标记内。

我的问题是如何让它验证选项卡内的表单字段，并将#progress移出#installationForm?

Answer 1

要在隐藏字段时允许验证，我们必须覆盖隐藏时的默认忽略。

这应该适合你:

$('#myform').validate({
    ignore: [],
    // etc etc other validation options
});

验证代码查看代码并基本上创建一个要忽略的字段数组，这会用空数组覆盖，这意味着验证所有内容。