1

I have a multi-step reg form with each step in a fieldset,i am using bootstrap validator for validation.I made the 'next' button in first step to toggle validation.And it works well...

The problem i have is,i have to prevent going to next step on an error. Now, validation works on clicking 'next'in first step but immediately passes to next step. I want to stay there until validation is success...

How to do this? i m giving my chunk of code...i have all libraries included...

...
<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>
Vertexwahn
  • 7,709
  • 6
  • 64
  • 90
ko.rajasekar
  • 25
  • 1
  • 4
  • [Bootstrap Plugin for Creating Multistep Forms](https://github.com/VinceG/twitter-bootstrap-wizard) – Sisir Aug 18 '14 at 11:14

0 Answers0