Question

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

这是我的表格：

<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) {功能连接起来？

任何帮助都将不胜感激。

Answer 1

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

    import pandas as pd
    import re

    d = {'Column1': ["hello http://www.google.com", "bye www.mail.com www.docs.google.com/index"]}
    df = pd.DataFrame(data=d)


    f = lambda s : re.sub('https*://[\w\.]+\.com[\w=*/\-]+|https*://[\w\.]+\.com|[\w\.]+\.com/[\w/\-]+',lambda x: re.findall('(?<=\://)[\w\.]+\.com|[\w\.]+\.com', x.group())[0], s)


    print(df["Column1"].apply(f))

此外，您可以使用jQuery $(".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);} );插件动态添加/删除规则：

validate()

引导向导 - 验证表单步骤

1 个答案: