Question

我正在创建一个多步骤表单向导（使用Twitter Bootstrap向导）并查看Parsley多步示例我不知道如果我有两个以上的步骤我将如何实现它我的当前表单至少有4个步骤。

这是我不明白的事情

<span class="next btn btn-info pull-right" data-current-block="1" data-next-block="2">Next ></span>

我的下一个按钮是常量

这是欧芹示例

<form id="demo-form" data-parsley-validate>
  <div class="first block1 show">
    <label for="firstname">Firstname:</label>
    <input type="text" name="firstname" data-parsley-group="block1" required/>

    <label for="lastname">Lastname:</label>
    <input type="text" name="lastname" data-parsley-group="block1" required />
    <span class="next btn btn-info pull-right" data-current-block="1" data-next-block="2">Next ></span>
  </div>

  <div class="second block2 hidden">
    <label for="fullname">Email:</label>
    <input type="text" name="fullname" required  data-parsley-type="email" data-parsley-group="block2" />
    <span class="next btn btn-info pull-left" data-current-block="2" data-next-block="1">< Previous</span>
    <input type="submit" class="btn btn-default pull-right" />
  </div>
</form>

<script type="text/javascript">
$(document).ready(function () {
  $('.next').on('click', function () {
    var current = $(this).data('currentBlock'),
      next = $(this).data('nextBlock');

    // only validate going forward. If current group is invalid, do not go further
    // .parsley().validate() returns validation result AND show errors
    if (next > current)
      if (false === $('#demo-form').parsley().validate('block' + current))
        return;

    // validation was ok. We can go on next step.
    $('.block' + current)
      .removeClass('show')
      .addClass('hidden');

    $('.block' + next)
      .removeClass('hidden')
      .addClass('show');

  });
});
</script>

Answer 1

解决方案或解决方法非常简单。最好只使用你想要拥有以下

的Bootstrap Wizard方法

$('#w4').bootstrapWizard({
        tabClass: 'wizard-steps',
        nextSelector: 'ul.pager li.next',
        previousSelector: 'ul.pager li.previous',
        firstSelector: null,
        lastSelector: null,
        onNext: function( tab, navigation, index, newindex ) {

            var current = index,
                next = current + 1;

            // only validate going forward. If current group is invalid, do not go further
            // .parsley().validate() returns validation result AND show errors
            if (next > current)
                if (false === $('#bioForm').parsley().validate('step' + current))
                    return false;

            // validation was ok. We can go on next step.
            $('.step' + current)
                .removeClass('show')
                .addClass('hidden');

            $('.step' + next)
                .removeClass('hidden')
                .addClass('show');

        }

    });

Answer 2

我知道这已经晚了，但可以帮助其他有需要的人。有类似的问题，这就是我解决它的方法。

我将此添加到每个控件，我需要在每个步骤上进行验证将此添加到step1控件：data-parsley-group =“block-1” 将此添加到step2控件：data-parsley-group =“block-2”

....每个步骤都在不断增加。

在你的bootstrapwizard javascript中添加以下代码在'OnNext'功能中。

$('#form').bootstrapWizard({
        tabClass: 'wizard-steps',

       'onNext': function (tab, navigation, index) {
       var $valid = $("#form").parsley().validate({ group: 'block-' + index });
            if(!$valid) {
                return false;
            }
}
});

希望这可以帮助你。

parsleyjs与多步形式

2 个答案: