使用bootstrapvalidator进行多步注册 - 防止出错

时间:2014-07-14 15:49:10

标签: twitter-bootstrap-3 registration validation multi-step

我在一个字段集中的每一步都有一个多步骤的注册表单,我使用bootstrap验证器进行验证。我做了下一个'按钮在第一步切换验证。它运作良好...

我遇到的问题是,我必须阻止对错误进行下一步。 现在,验证可以在第一步中单击“下一步”,但会立即转到下一步。 我想留在那里直到验证成功......

怎么做? 我给了我一大堆代码......我已经包含了所有的库......

...
<fieldset id="first_step">
        <h2 class="fs-title">Create your account</h2>
        <div class="form-group">
            <label class="col-md-3 control-label">Username</label>
            <div class="col-md-9">
                <input type="text" class="form-control" name="uname" />
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-3 control-label">Password</label>
            <div class="col-md-9">
                <input type="password" class="form-control" name="pwd" />
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-3 control-label">Confirm Password</label>
            <div class="col-md-9">
                <input type="password" class="form-control" id="cpwd" />
            </div>
        </div>
        <input type="button" name="next" id="next" class="next action-button" value="Next" />
    </fieldset>
    <fieldset>
        <h2 class="fs-title">Personal Details</h2>
        <h3 class="fs-subtitle"></h3>
        <div class="form-group">
            <label class="col-md-3 control-label">*Register Number</label>
            <div class="col-md-9">
                <input type="text" class="form-control" id="Text1" name="reg" />
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-3 control-label">*Name</label>
            <div class="col-md-9">
                <input type="text" class="form-control" id="Text2" name="stname" />
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-3 control-label"></label>
            <div class="col-md-offset-3 col-md-12">
            </div>
        </div>
        <input type="button" name="previous" class="previous action-button" value="Previous" />
        <input type="submit" id="sub_but" name="submit" class="submit action-button" value="Submit" />
    </fieldset>

    <script type="text/javascript">
    $(".next").click(function() {
    $('#msform').data('bootstrapValidator').validate();
    //prevent here????
    //Script to slide first fielset

    }
    $(".previous").click(function() {

    //Script to slide back to first fieldset

    }
    </script>

0 个答案:

没有答案