Question

我使用jQuery验证制作了一个多部分注册表单。我的问题是单击第一个字段集中的下一个按钮，验证工作正常。在下一个字段集中，活动字段集滑动并忽略验证，这种情况与其他情况相同。

<script>
    $(document).ready(function () {
        // All required fields
        var fields = [
            {
                package: 'required'
            },
            {
                fname: 'required',
                lname: 'required'
            }
        ];

        // Messages
        var msgs = [
            {
                package: 'Please select your package.'
            },
            {
                fname: 'Please enter your first name.',
                lname: 'Please enter your last name.'
            }
        ];

        // Get the index of the active fieldset
        var active = $('fieldset.active').index() - 1;

        // I want only single method for the next button
        $('.next').click(function () {
            $('#register').validate({
                ignore: [],
                rules: fields[active],
                messages: msgs[active]
            }).form();

            if ($('#register').valid()) {
                // Set the current fieldset as inactive
                $(this).parents('fieldset.active')
                       .slideUp()
                       .removeClass('active')
                       .next()
                       .slideDown()
                       .addClass('active');
            }
        });

        // Not this
        $('.next').eq(0).click(function () {
            // same contents
        });

        $('.next').eq(1).click(function () {
            // same contents
        });

        $('.next').eq(2).click(function () {
            // same contents
        });

        // ...
    });
</script>

<form id="register" method="post">
    <fieldset class="active"> <!-- Set as active by default -->
        <legend>Select your package</legend>
        <select name="package">
            <option value="" selected>Select</option>
            <option value="basic">Basic</option>
            <option value="pro">Pro</option>
            <option value="premium">Premium</option>
            <option value="elite">Elite</option>
        </select>
        <input type="button" class="next" value="Next" />
    </fieldset>
    <fieldset>
        <legend>Your personal info</legend>
        <ul>
            <li>
                <input type="text" name="fname" placeholder="First name" />
            </li>
            <li>
                <input type="text" name="lname" placeholder="Last name" />
            </li>
        </ul>
    </fieldset>
    <!-- More fieldsets  -->
</form>

我只想在点击下一个按钮

时验证每个字段集

我们将非常感谢您的想法。谢谢！

Answer 1

试试这个， bootstrap-multi-step-registration-form

使用Desc查看页面来源以了解代码。

jQuery验证验证多部分表单中的所有步骤

1 个答案: