locked
Form Validation - Setting Wizard Step to Disabled RRS feed

  • Question

  • User940894612 posted

    Hi, 

    I was wondering if someone could help me.  I have a new user registration sign up form.  

        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrapcss">
        <script src="../Scripts/jquery-1.12.2.min.js"></script>
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    
    <script type="text/javascript">
        $(document).ready(function () {
            var navListItems = $('div.setup-panel div a'),
              allWells = $('.setup-content'),
              allNextBtn = $('.nextBtn');
    
            allWells.hide();
    
            navListItems.click(function (e) {
                e.preventDefault();
                var $target = $($(this).attr('href')),
                  $item = $(this);
    
                if (!$item.hasClass('disabled')) {
                    navListItems.removeClass('btn-primary').addClass('btn-default');
                    $item.addClass('btn-primary');
                    allWells.hide();
                    $target.show();
                    $target.find('input:eq(0)').focus();
                }
            });
    
            allNextBtn.click(function () {
                var curStep = $(this).closest(".setup-content"),
              curStepBtn = curStep.attr("id"),
              nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
              previousStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().prev().children("a"),
              curInputs = curStep.find("input[type='text'],input[type='url']"),
              isValid = true;
                alert(nextStepWizard);
                $(".form-group").removeClass("has-error");
                for (var i = 0; i < curInputs.length; i++) {
                    if (!curInputs[i].validity.valid) {
                        isValid = false;
                        $(curInputs[i]).closest(".form-group").addClass("has-error");
                    }
                }
    
                if (isValid)
                    nextStepWizard.removeAttr('disabled').trigger('click');
                    previousStepWizard.attr("disabled", "disabled");
            });
    
            $('div.setup-panel div a.btn-primary').trigger('click');
        });
      </script>
    
    <div class="container">
      
    <div class="stepwizard col-md-offset-3">
        <div class="stepwizard-row setup-panel">
          <div class="stepwizard-step">
            <a href="#step-1" type="button" class="btn btn-primary btn-circle">1</a>
            <p>Registration</p>
          </div>
          <div class="stepwizard-step">
            <a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a>
            <p>Personal Details</p>
          </div>
          <div class="stepwizard-step">
            <a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a>
            <p>Sign Up</p>
          </div>
        </div>
      </div>
      
      <form role="form" action="" method="post">
        <div class="row setup-content" id="step-1">
          <div class="col-xs-6 col-md-offset-3">
            <div class="col-md-12">
                <h3 class="textaligncenter">Registration</h3>
              <div class="form-group">
                <label class="control-label"></label>
                <input  maxlength="100" type="text" required="required" class="MailingListFormTextBox100" placeholder="Enter Username"  />
              </div>
              <div class="form-group">
                <label class="control-label"></label>
                <input maxlength="100" type="text" required="required" class="MailingListFormTextBox100" placeholder="Enter Email Address" />
              </div>
              <div class="form-group">
                <label class="control-label"></label>
                <input maxlength="100" type="password" required="required" class="MailingListFormTextBox100" placeholder="Enter Password" />
              </div>
                <div class="form-group">
                <label class="control-label"></label>
                <input maxlength="100" type="password" required="required" class="MailingListFormTextBox100" placeholder="Re-Enter Password" />
              </div>
                <div class="form-group">
                <label class="control-label"></label>
                <input maxlength="100" type="text" required="required" class="MailingListFormTextBox100" placeholder="Security Question" />
              </div>
                <div class="form-group">
                <label class="control-label"></label>
                <input maxlength="100" type="text" required="required" class="MailingListFormTextBox100" placeholder="Security Answer" />
              </div>
              <button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
            </div>
          </div>
        </div>
        <div class="row setup-content" id="step-2">
          <div class="col-xs-6 col-md-offset-3">
            <div class="col-md-12">
                <h3 class="textaligncenter">Personal Details</h3><br />
              <div class="form-group">
                <label class="control-label">Company Name</label>
                <input maxlength="200" type="email" required="required" class="form-control" placeholder="Enter Company Name" />
              </div>
              <div class="form-group">
                <label class="control-label">Company Address</label>
                <input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address"  />
              </div>
              <button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
            </div>
          </div>
        </div>
        <div class="row setup-content" id="step-3">
          <div class="col-xs-6 col-md-offset-3">
              <h3 class="textaligncenter">Account Setup</h3><br />
            <div class="col-md-12">          
                <p class="textaligncenter">
                Your account has been successfully created.
                </p>
              <button class="btn btn-success btn-lg pull-right" type="submit">Submit</button>
            </div>
          </div>
        </div>
      </form>
      
    </div>

    Any help would be greatly appreciated.

    Thanks

    Rob

    Friday, April 1, 2016 12:58 PM

Answers

  • User614698185 posted

    Hi Rob, 

    Based on your requirement, I create the sample for you, like below:

    <head runat="server">
        <title></title>
        <style type="text/css">
            body {
                margin-top: 40px;
            }
    
            .stepwizard-step p {
                margin-top: 10px;
            }
    
            .stepwizard-row {
                display: table-row;
            }
    
            .stepwizard {
                display: table;
                width: 50%;
                ;
            }
    
            .stepwizard-step button[disabled] {
                opacity: 1 !important;
                filter: alpha(opacity=100) !important;
            }
    
            .stepwizard-row:before {
                top: 14px;
                bottom: 0;
                ;
                content: " ";
                width: 100%;
                height: 1px;
                background-color: #ccc;
            }
    
            .stepwizard-step {
                display: table-cell;
                text-align: center;
                ;
            }
    
            .btn-circle {
                width: 30px;
                height: 30px;
                text-align: center;
                padding: 6px 0;
                font-size: 12px;
                line-height: 1.428571429;
                border-radius: 15px;
            }
        </style>
    
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var navListItems = $('div.setup-panel div a'),
                        allWells = $('.setup-content'),
                        allNextBtn = $('.nextBtn');
    
                allWells.hide();
    
                navListItems.click(function (e) {
                    e.preventDefault();
                    var $target = $($(this).attr('href')),
                            $item = $(this);
    
                    if (!$item.hasClass('disabled')) {
                        navListItems.removeClass('btn-primary').addClass('btn-default');
                        $item.addClass('btn-primary');
                        allWells.hide();
                        $target.show();
                        $target.find('input:eq(0)').focus();
                    }
                });
    
                allNextBtn.click(function () {
                    var curStep = $(this).closest(".setup-content"),
                        curStepBtn = curStep.attr("id"),
                        nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
                        curInputs = curStep.find("input[type='text'],input[type='url']"),
                        isValid = true;
    
                    $(".form-group").removeClass("has-error");
                    for (var i = 0; i < curInputs.length; i++) {
                        if (!curInputs[i].validity.valid) {
                            isValid = false;
                            $(curInputs[i]).closest(".form-group").addClass("has-error");
                        }
                    }
    
                    if (isValid)
                        nextStepWizard.removeAttr('disabled').trigger('click');
                });
    
                $('div.setup-panel div a.btn-primary').trigger('click');
            });
        </script>
    
    </head>
    <body>
        <div class="container">
    
            <div class="stepwizard col-md-offset-3">
                <div class="stepwizard-row setup-panel">
                    <div class="stepwizard-step">
                        <a href="#step-1" type="button" class="btn btn-primary btn-circle">1</a>
                        <p>Step 1</p>
                    </div>
                    <div class="stepwizard-step">
                        <a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a>
                        <p>Step 2</p>
                    </div>
                    <div class="stepwizard-step">
                        <a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a>
                        <p>Step 3</p>
                    </div>
                </div>
            </div>
    
            <form role="form" action="" method="post">
                <div class="row setup-content" id="step-1">
                    <div class="col-xs-6 col-md-offset-3">
                        <div class="col-md-12">
                            <h3>Step 1</h3>
                            <div class="form-group">
                                <label class="control-label">First Name</label>
                                <input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter First Name" />
                            </div>
                            <div class="form-group">
                                <label class="control-label">Last Name</label>
                                <input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Last Name" />
                            </div>
                            <div class="form-group">
                                <label class="control-label">Address</label>
                                <textarea required="required" class="form-control" placeholder="Enter your address"></textarea>
                            </div>
                            <button class="btn btn-primary nextBtn btn-lg pull-right" type="button">Next</button>
                        </div>
                    </div>
                </div>
                <div class="row setup-content" id="step-2">
                    <div class="col-xs-6 col-md-offset-3">
                        <div class="col-md-12">
                            <h3>Step 2</h3>
                            <div class="form-group">
                                <label class="control-label">Company Name</label>
                                <input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" />
                            </div>
                            <div class="form-group">
                                <label class="control-label">Company Address</label>
                                <input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" />
                            </div>
                            <button class="btn btn-primary nextBtn btn-lg pull-right" type="button">Next</button>
                        </div>
                    </div>
                </div>
                <div class="row setup-content" id="step-3">
                    <div class="col-xs-6 col-md-offset-3">
                        <div class="col-md-12">
                            <h3>Step 3</h3>
                            <button class="btn btn-success btn-lg pull-right" type="submit">Submit</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </body>

    Best Regards,

    Candice Zhou

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 4, 2016 8:37 AM

All replies

  • User632428103 posted

    Hello robbiesd81,

    thanks for shared all your code with CDN it's simple to copy it in a dev solution and try it and try to understand what's happens ...

    but your question for ME isn't clear ...

    I've copy paste your code, just add my own jquery, run the page and :

    - when page load i see three tab, on load page access first tab 

    - it's not possible to access other tab while all control isn't fill 

    - if field first tab is well fill click NEXT button i access second tab BUT it's alaways possible to access first tab BUT third tab is not accessible

    - if field second tab is fill and click NEXT i can access third tab, second tab is accessible but first tab isn't accessible

    Sorry, i would like to try to help you but i think your question isn't too clear ...

    give us more information about your requirement ..

    Monday, April 4, 2016 8:34 AM
  • User614698185 posted

    Hi Rob, 

    Based on your requirement, I create the sample for you, like below:

    <head runat="server">
        <title></title>
        <style type="text/css">
            body {
                margin-top: 40px;
            }
    
            .stepwizard-step p {
                margin-top: 10px;
            }
    
            .stepwizard-row {
                display: table-row;
            }
    
            .stepwizard {
                display: table;
                width: 50%;
                ;
            }
    
            .stepwizard-step button[disabled] {
                opacity: 1 !important;
                filter: alpha(opacity=100) !important;
            }
    
            .stepwizard-row:before {
                top: 14px;
                bottom: 0;
                ;
                content: " ";
                width: 100%;
                height: 1px;
                background-color: #ccc;
            }
    
            .stepwizard-step {
                display: table-cell;
                text-align: center;
                ;
            }
    
            .btn-circle {
                width: 30px;
                height: 30px;
                text-align: center;
                padding: 6px 0;
                font-size: 12px;
                line-height: 1.428571429;
                border-radius: 15px;
            }
        </style>
    
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var navListItems = $('div.setup-panel div a'),
                        allWells = $('.setup-content'),
                        allNextBtn = $('.nextBtn');
    
                allWells.hide();
    
                navListItems.click(function (e) {
                    e.preventDefault();
                    var $target = $($(this).attr('href')),
                            $item = $(this);
    
                    if (!$item.hasClass('disabled')) {
                        navListItems.removeClass('btn-primary').addClass('btn-default');
                        $item.addClass('btn-primary');
                        allWells.hide();
                        $target.show();
                        $target.find('input:eq(0)').focus();
                    }
                });
    
                allNextBtn.click(function () {
                    var curStep = $(this).closest(".setup-content"),
                        curStepBtn = curStep.attr("id"),
                        nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
                        curInputs = curStep.find("input[type='text'],input[type='url']"),
                        isValid = true;
    
                    $(".form-group").removeClass("has-error");
                    for (var i = 0; i < curInputs.length; i++) {
                        if (!curInputs[i].validity.valid) {
                            isValid = false;
                            $(curInputs[i]).closest(".form-group").addClass("has-error");
                        }
                    }
    
                    if (isValid)
                        nextStepWizard.removeAttr('disabled').trigger('click');
                });
    
                $('div.setup-panel div a.btn-primary').trigger('click');
            });
        </script>
    
    </head>
    <body>
        <div class="container">
    
            <div class="stepwizard col-md-offset-3">
                <div class="stepwizard-row setup-panel">
                    <div class="stepwizard-step">
                        <a href="#step-1" type="button" class="btn btn-primary btn-circle">1</a>
                        <p>Step 1</p>
                    </div>
                    <div class="stepwizard-step">
                        <a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a>
                        <p>Step 2</p>
                    </div>
                    <div class="stepwizard-step">
                        <a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a>
                        <p>Step 3</p>
                    </div>
                </div>
            </div>
    
            <form role="form" action="" method="post">
                <div class="row setup-content" id="step-1">
                    <div class="col-xs-6 col-md-offset-3">
                        <div class="col-md-12">
                            <h3>Step 1</h3>
                            <div class="form-group">
                                <label class="control-label">First Name</label>
                                <input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter First Name" />
                            </div>
                            <div class="form-group">
                                <label class="control-label">Last Name</label>
                                <input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Last Name" />
                            </div>
                            <div class="form-group">
                                <label class="control-label">Address</label>
                                <textarea required="required" class="form-control" placeholder="Enter your address"></textarea>
                            </div>
                            <button class="btn btn-primary nextBtn btn-lg pull-right" type="button">Next</button>
                        </div>
                    </div>
                </div>
                <div class="row setup-content" id="step-2">
                    <div class="col-xs-6 col-md-offset-3">
                        <div class="col-md-12">
                            <h3>Step 2</h3>
                            <div class="form-group">
                                <label class="control-label">Company Name</label>
                                <input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" />
                            </div>
                            <div class="form-group">
                                <label class="control-label">Company Address</label>
                                <input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" />
                            </div>
                            <button class="btn btn-primary nextBtn btn-lg pull-right" type="button">Next</button>
                        </div>
                    </div>
                </div>
                <div class="row setup-content" id="step-3">
                    <div class="col-xs-6 col-md-offset-3">
                        <div class="col-md-12">
                            <h3>Step 3</h3>
                            <button class="btn btn-success btn-lg pull-right" type="submit">Submit</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </body>

    Best Regards,

    Candice Zhou

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 4, 2016 8:37 AM