在bootstrap向导上进行欧芹验证

时间:2017-12-27 19:33:00

标签: twitter-bootstrap parsley.js

我使用bootstrap向导制作多步表单 为了验证,我使用了Parsley 问题是(当我点击下一个按钮进入第二次点击,验证工作,如果验证返回true,我去。如果没有,我必须更正错误然后我去第二个选项卡, 但是这个过程不适用于其他下一次点击移动到第三个和其他选项卡,如果我点击下一步,我将移动到选项卡而不进行验证检查!

java脚本代码

<script>
        $(document).ready(function() {


            $('#rootwizard').bootstrapWizard({
              'onNext': function(tab, navigation, index) {
                var form = jQuery('#demo-form');
                    form.parsley().validate({group: 'tab'+index});

                    if (form.parsley().isValid({group: 'tab'+index})){

                window.alert(index);               
                  return true;
                } else {
                  return false;
                }
              },
              onPrevious: function(tab, navigation, index) {
                return true;
              },
              onTabShow: function(tab, navigation, index) {
                console.log("show : " + index);
              }
            });
});

和HTML代码:

<div class="tab-pane" id="tab1">
                        <form id="demo-form" data-parsley-validate action="{{route('test')}}" method="post">
                            {{ csrf_field() }}
                            <input type="email" class="form-control form-control-lg " data-parsley-trigger="change" placeholder="col-form-label-lg" name="email" required="" data-parsley-type="email" data-parsley-group="tab1">
                            <input type="text" class="form-control form-control-lg "  placeholder="col-form-label-lg" name="mailbox" required="" data-parsley-group="tab5">
                        </div>
                        <div class="tab-pane" id="tab2">
                            <input type="text" class="form-control form-control-lg "  placeholder="col-form-label-lg" name="projName" required="" data-parsley-group="tab2">
                        </div>
                        <div class="tab-pane" id="tab3">
                            <button type="submit" id="sub-button" onclick="submitForms()">
                                submit
                            </button>
                        </form>
                    </div>

0 个答案:

没有答案