引导向导 - 验证表单步骤答案

【问题标题】：Bootstrap Wizard - Validate Form Steps引导向导 - 验证表单步骤
【发布时间】：2018-11-06 22:50:12
【问题描述】：

我使用了搜索功能，但找不到适合我需要的解决方案。我有一个多步骤表单，我想验证每一步，所以如果必填字段为空或未选中，我的用户应该无法进入下一步。

这是我的表格：

<form method='post' action='index.php' id='signupForm' role='form' class='form-horizontal'>
    <div class='tab-pane' role='tabpanel' id='complete'>
        <div class='row margin-bottom-30'>
            <div class='col-sm-6'>
                <h3>Please select</h3><br />
                <label class='inputboxes'> Option 1  <span class='color-red'>*</span><br />
                    <input type='radio' id='boxes' name='payment_method' value='1' checked='checked' required><span class='checkmark'></span><br />
                </label>
            </div>

            <div class='col-sm-6'>
                <div class='row'>
                    <div class='col-sm-6'>
                        <label>Firstname <span class='color-red'>*</span></label>
                            <input type='text' name='firstname' class='form-control margin-bottom-20' required>
                    </div>
                    <div class='col-sm-6'>
                        <label>Lastname <span class='color-red'>*</span></label>
                            <input type='text' name='lastname' class='form-control margin-bottom-20' required>
                    </div>
                </div>
            </div>
        </div>

        <ul class='list-inline pull-right'>
            <li><button type='button' class='btn btn-default prev-step'>Zur&uuml;ck</button></li>
            <li><input type='submit' name='submit_data' class='btn btn-form btn-info-full' value='Registrierung abschlie&szlig;en'></li>
        </ul>
    </div>
</form>

这里是向导的 Javascript：

<script type='text/javascript'>

    $(document).ready(function () {
        //Initialize tooltips
        $('.nav-tabs > li a[title]').tooltip();

        //Wizard
        $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {

            var $target = $(e.target);

            if ($target.parent().hasClass('disabled')) {
                return false;
            }
        });

        $(".next-step").click(function (e) {

            var $active = $('.wizard .nav-tabs li.active');
            $active.next().removeClass('disabled');
            nextTab($active);

        });
        $(".prev-step").click(function (e) {

            var $active = $('.wizard .nav-tabs li.active');
            prevTab($active);

        });
    });

    function nextTab(elem) {
        $(elem).next().find('a[data-toggle="tab"]').click();
    }
    function prevTab(elem) {
        $(elem).prev().find('a[data-toggle="tab"]').click();
    }
</script>

到目前为止我尝试过的是：

<script>
$(document).ready(function() {
    var $validator = $("#signupForm").validate({
      rules: {
        boxes: {
          required: true
        },
        firstname: {
          required: true,
          minlength: 3
        },
        lastname: {
          required: true,
          minlength: 3
        }
      }
    });
});
</script>

如何将我的$validator 与引导向导$(".next-step").click(function (e) { 功能连接起来？

任何帮助将不胜感激。

【问题讨论】：

标签： javascript twitter-bootstrap forms validation wizard

【解决方案1】：

其中一个选项是拆分每个步骤的验证规则并单独验证，即：

 $(".next-step").click(function (e){
      var $validator = $("#signupForm").validate({
          rules: { boxes: {  required: true } } });

      if(!$validator) return;

      var $active = $('.wizard .nav-tabs li.active');
      $active.next().removeClass('disabled');
      nextTab($active);}
      );

另外，您可以使用 jQuery validate() 插件动态添加/删除您的规则：

$( "#signupForm" ).rules( "remove" ); // Removes all static rules from an element
$( "#signupForm" ).rules( "remove", "boxes" ); // Removes 'boxes' rule;
$( "#signupForm" ).rules( "add", "boxes");

【讨论】：