Javascript 使用引导程序验证器逐步验证 jquery-steps 表单

Step by Step validating jquery-steps form with bootstrap validator

提问by Kamlesh Panchal

I have a multistep form made using jquery-steps (https://github.com/rstaib/jquery-steps). I am using bootstrap validator plugin (https://github.com/formvalidation/formvalidation.io) I am able to get the validation rules working on field while typing (it shows the validation on the fly while user is typing).

我有一个使用 jquery-steps ( https://github.com/rstaib/jquery-steps)制作的多步表单。我正在使用引导验证器插件（https://github.com/formvalidation/formvalidation.io）我能够在输入时使验证规则在字段上工作（它在用户输入时即时显示验证）。

But If a required field is left blank, or the user did not provide a valid information in a field and clicks on the next, the step moves ahead. I want to prevent the user from moving on to next step, if any field is showing "Invalid" or a "Required" field is not filled. How to accomplish this?

但是，如果必填字段留空，或者用户未在字段中提供有效信息并单击下一步，则该步骤继续进行。如果任何字段显示“无效”或“必填”字段未填写，我想阻止用户继续下一步。如何做到这一点？

回答by Shehary

You are using validation plugin and jQuery-step plugin separate and they handling there functions independently, that's the reason even if input is invalid, on next button click, it skips the validation error and move to next step.

您正在单独使用验证插件和 jQuery-step 插件，它们独立处理这些功能，这就是即使输入无效的原因，在下一个按钮单击时，它会跳过验证错误并移至下一步。

$("#wizard").steps({
    headerTag: "h2",
    bodyTag: "section",
    saveState: true,
})

$('#multiphase').bootstrapValidator({
    //Validation rules and messages
})

• You are using bootstrapvalidatorplugin which has no API support, callback function support for jQuery-Step Pluginand even it's development discontinued
• jQuery-Step Pluginhas it's own validation mechanishm and I haven't found any reference and support for bootstrapvalidatorin there examples and documents.

• 您使用的bootstrapvalidator插件没有 API 支持、回调函数支持jQuery-Step Plugin，甚至开发中止
• jQuery-Step 插件有它自己的验证机制，我在那里的示例和文档中没有找到对bootstrapvalidator 的任何参考和支持。

So suggest don't waste time with the code and try to make it work (which needs loads of customization) instead use bootstrapFormValidationplugin which basically the upgrade of bootstrapvalidatorplugin and has fully working example with jQuery-Step Pluginand have better support

所以建议不要在代码上浪费时间并尝试让它工作（这需要大量的定制），而是使用bootstrapFormValidation插件，它基本上是bootstrapvalidator插件的升级，并且有jQuery-Step 插件的完整工作示例，并且有更好的支持

So without major changes in your HTML code, you can just replace the bootstrapvalidatorplugin with bootstrapFormValidationplugin and can achieve the desired result with smiling face. :)

因此，没有在你的HTML代码的重大变化，您只需更换bootstrapvalidator与插件bootstrapFormValidation插件，可以实现与笑脸期望的结果。:)

$(document).ready(function () {
    function adjustIframeHeight() {
        var $body   = $('body'),
            $iframe = $body.data('iframe.fv');
        if ($iframe) {
            // Adjust the height of iframe
            $iframe.height($body.height());
        }
    }
    $("#multiphase").steps({
        headerTag: "h2",
        bodyTag: "section",
        saveState: true,
  onStepChanged: function(e, currentIndex, priorIndex) {
                // You don't need to care about it
                // It is for the specific demo
                adjustIframeHeight();
            },
            // Triggered when clicking the Previous/Next buttons
            onStepChanging: function(e, currentIndex, newIndex) {
                var fv         = $('#multiphase').data('formValidation'), // FormValidation instance
                    // The current step container
                    $container = $('#multiphase').find('section[data-step="' + currentIndex +'"]');

                // Validate the container
                fv.validateContainer($container);

                var isValidStep = fv.isValidContainer($container);
                if (isValidStep === false || isValidStep === null) {
                    // Do not jump to the next step
                    return false;
                }

                return true;
            },
            // Triggered when clicking the Finish button
            onFinishing: function(e, currentIndex) {
                var fv         = $('#multiphase').data('formValidation'),
                    $container = $('#multiphase').find('section[data-step="' + currentIndex +'"]');

                // Validate the last step container
                fv.validateContainer($container);

                var isValidStep = fv.isValidContainer($container);
                if (isValidStep === false || isValidStep === null) {
                    return false;
                }

                return true;
            },
            onFinished: function(e, currentIndex) {
                // Uncomment the following line to submit the form using the defaultSubmit() method
                //$('#multiphase').formValidation('defaultSubmit');

                // For testing purpose
                $('#welcomeModal').modal("show");
            }
        }).formValidation({
        excluded: ':disabled',
        message: 'This value is not valid',
        container: 'tooltip',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            //last name validation  
            sd_lastname: {
                container: 'popover',
                validators: {
                    notEmpty: {
                        message: 'The Last Name is required and cannot be empty'
                    }
                }
            },
            //first name validation
            sd_firstname: {
                container: 'popover',
                validators: {
                    notEmpty: {
                        message: 'The First Name is required and cannot be empty'
                    },
                    stringLength: {
                        min: 3,
                        max: 30,
                        message: 'The First Name must be more than 7 and less than 30 characters long'
                    },
                    regexp: {
                        regexp: /^[A-Z]+$/i,
                        message: 'The First Name can only consist of alphabetical characters'
                    }
                }
            },
            //validation of Parent's details step start
            //last name validation  
            pd_lastname: {
                container: 'popover',
                validators: {
                    notEmpty: {
                        message: 'The Last Name is required and cannot be empty'
                    }
                }
            },
            //first name validation
            pd_firstname: {
                container: 'popover',
                validators: {
                    notEmpty: {
                        message: 'The First Name is required and cannot be empty'
                    },
                    stringLength: {
                        min: 3,
                        max: 30,
                        message: 'The First Name must be more than 7 and less than 30 characters long'
                    },
                    regexp: {
                        regexp: /^[A-Z]+$/i,
                        message: 'The First Name can only consist of alphabetical characters'
                    }
                }
            },
            // Validation for Reference details starts
            //School reference name
            rd_schoolrefname: {
                container: 'popover',
                validators: {
                    notEmpty: {
                        message: 'The School Reference Name is required and cannot be empty'
                    },
                    stringLength: {
                        min: 7,
                        max: 40,
                        message: 'The School Reference Name must be more than 7 and less than 40 characters long'
                    },
                    regexp: {
                        regexp: /^[A-Z\s]+$/i,
                        message: 'The School Reference Name can only consist of alphabetical characters'
                    }
                }
            },
            //School reference phone
            rd_schoolrefmobile: {
                container: 'popover',
                validators: {
                    notEmpty: {
                        message: 'The Phone or Mobile is required and cannot be empty'
                    }
                }
            },
            rd_schoolrefemail: {
                container: 'popover',
                validators: {
                    notEmpty: {
                        message: 'The E-Mail ID is required and cannot be empty'
                    },
                    regexp: {
                        regexp: /[a-zA-Z0-9]+(?:(\.|_)[A-Za-z0-9!#$%&'*+\/=?^`{|}~-]+)*@(?!([a-zA-Z0-9]*\.[a-zA-Z0-9]*\.[a-zA-Z0-9]*\.))(?:[A-Za-z0-9](?:[a-zA-Z0-9-]*[A-Za-z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?/g,
                        message: 'The E-Mail ID is not a valid E-Mail'
                    }
                }
            },
        }

    })

});

.wizard > .content {
min-height: 20em !important;
}
.wizard .content > .body {
width: 100%;
height: auto;
padding: 15px;
position: relative;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/css/formValidation.min.css" />
<link rel="stylesheet" href="http://formvalidation.io/vendor/jquery.steps/css/jquery.steps.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/formValidation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/framework/bootstrap.min.js"></script>
<script src="http://formvalidation.io/vendor/jquery.steps/js/jquery.steps.min.js"></script>
<div id="wrapper">
<!-- main container div-->
<div id="container" class="container">
 <div class="row">
  <div id="maincontent" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
   <div class="row">
    <div id="" class="col-lg-12">
     <form id="multiphase" role="form" class="form-horizontal" action="" method="post">
        <h2>Step</h2>
       <section data-step="0">
         <h2>Student's Details:</h2>

        <hr>
        <div class="form-group">
         <label for="sd_lastname" class="col-lg-2 control-label">Last Name:</label>
         <div class="col-lg-3">
          <input type="text" name="sd_lastname" id="sd_lastname" class="form-control" placeholder="Last Name" value="" tabindex="1">
         </div>
        </div>
        <div class="form-group">
         <label for="sd_firstname" class="col-lg-2 control-label">First Name:</label>
         <div class="col-lg-3">
          <input type="text" name="sd_firstname" id="sd_firstname" class="form-control" placeholder="First Name" value="" tabindex="2">
         </div>
        </div>
       </section>
        <h2>Step</h2>

       <section data-step="1">
         <h2>Parent's Details:</h2>

        <hr>
        <div class="form-group">
         <label for="pd_lastname" class="col-lg-2 control-label">Last Name:</label>
         <div class="col-lg-3">
          <input type="text" name="pd_lastname" id="pd_lastname" class="form-control" placeholder="Last Name" value="" tabindex="1">
         </div>
        </div>
        <div class="form-group">
         <label for="pd_firstname" class="col-lg-2 control-label">First Name:</label>
         <div class="col-lg-3">
          <input type="text" name="pd_firstname" id="pd_firstname" class="form-control" placeholder="First Name" value="" tabindex="2">
         </div>
        </div>
       </section>
        <h2>Step</h2>

       <section data-step="2">
         <h2>Reference Details:</h2>

        <hr>
        <div class="form-group">
         <label for="rd_schoolrefname" class="col-lg-3 control-label">School Principal's Name:</label>
         <div class="col-lg-3">
          <input type="text" name="rd_schoolrefname" id="rd_schoolrefname" class="form-control" placeholder="First Name Last Name" value="" tabindex="1">
         </div>
        </div>
        <div class="form-group">
         <label for="rd_schoolrefmobile" class="col-lg-3 control-label">Phone or Mobile No.:</label>
         <div class="col-lg-2">
          <input type="text" name="rd_schoolrefmobile" id="rd_schoolrefmobile" class="form-control" placeholder="Phone or Mobile Number" data-mask="[phone]" value="" tabindex="2">
         </div>
        </div>
        <div class="form-group">
         <label for="rd_schoolrefemail" class="col-lg-3 control-label">E-Mail ID:</label>
         <div class="col-lg-3">
          <input type="text" name="rd_schoolrefemail" id="rd_schoolrefemail" class="form-control" placeholder="E-Mail ID" value="" tabindex="3">
         </div>
        </div>
       </section>
      <!-- end of wizard-->
     </form>
     <!-- end of form-->
    </div>
   </div>
   <!-- end of row-->
   <div class="modal fade" id="welcomeModal">
    <div class="modal-dialog">
     <div class="modal-content">
      <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h1 class="modal-title text-center">Add new last name</h1>

      </div>
      <div class="modal-body">
       <form method="POST" name="add_lastname">
        <input type="text" name="add_lastname" id="add_lastname" class="form-control" placeholder="Enter your last name here" value="">
        <p class="">The first alphabet of the last name <strong>MUST</strong> be in upper case.</p>
       </form>
      </div>
      <div class="modal-footer">
       <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
       <input name="addlastname" type="submit" value="Add" class="btn btn-primary">
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
 <div class="row hidden-print">
  <div id="footer" class="col-lg-12"></div>
 </div>
</div>
</div>

Fiddle Example

小提琴示例