BootstrapValidator - 逐步验证隐藏的和特定的文本字段

Question

可以按步骤验证表单上的文本字段。

我创建了一个表单，您可以在此处查看示例 link http://jsfiddle.net/milindex/93j2bgmm/1/

问题与疑惑：

可以使用 BoostrapValidator 验证文本字段，但使用 link?

有一个link进入第二步，如果用户没有完成第一步的字段文本，您可以继续下一步第二步。

我们可以避免这种情况，是否有任何方法可以检测用户是否没有完成第一步中的文本字段，并通过 BoostrapValidator 进行验证，但是 link。

在第二步中，用户可以提交表单而无需完成第一步中的文本字段。

注意：使用工具boostrapValidator的一些简单方式。

帮助资源：

http://bootstrapvalidator.com/settings/#event-form

示例代码：

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css">
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>


$(function() {

//Step function
$('#next_step_2').on("click",this,function(){
    $('.step_1').slideUp("fast");
    $('.step_2').slideDown("fast");
});

$('#previous_step_1').on("click",this,function(){
    $('.step_2').slideUp("fast");
    $('.step_1').slideDown("fast");
});


//Validate Form
$('#form').bootstrapValidator({
    message: 'This value is not valid',
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        names: {
            message: 'The Name is not valid',
            validators: {
                notEmpty: {
                    message: 'The Name is required and cannot be empty'
                }
            }
        },
        email: {
            validators: {
                notEmpty: {
                    message: 'The email is required and cannot be empty'
                },
                emailAddress: {
                    message: 'The input is not a valid email address'
                }
            }
        },
        phone: {
            message: 'The Phone is not valid',
            validators: {
                notEmpty: {
                    message: 'The Phone is required and cannot be empty'
                },
                integer: {
                    message: 'The value is not an integer'
                }
            }
        },
        country: {
            message: 'The Country is not valid',
            validators: {
                notEmpty: {
                    message: 'The Country is required and cannot be empty'
                }
            }
        }
    }
})
.on('success.form.bv', function(e) {
    alert("Thanks You!!!");
})

});

<div class="container">
<div class="row">
    <div class="col-xs-12">
        <form name="form" class="form" id="form" method="post">


            <!--Step_1-->
            <div class="step_1">

                <legend>Step 1</legend> 

                <div class="col-xs-6">
                    <div class="form-group">
                        <label class="control-label">Names</label>
                        <input type="text" id="names" name="names" class="form-control">
                    </div>
                </div>

                <div class="col-xs-6">
                    <div class="form-group">
                        <label class="control-label">Email</label>
                        <input type="text" id="email" name="email" class="form-control">
                    </div>
                </div>


                <div class="col-xs-12">
                    <a href="javascript:void(0)" class="btn btn-primary" id="next_step_2">Next Step</a>
                </div>

            </div>
            <!--End Step_1-->




            <!--Step_2-->
            <div class="step_2" style="display:none">

                <legend>Step 2</legend> 

                <div class="col-xs-6">
                    <div class="form-group">
                        <label class="control-label">Phone</label>
                        <input type="text" id="phone" name="phone" class="form-control">
                    </div>
                </div>

                <div class="col-xs-6">
                    <div class="form-group">
                        <label class="control-label">Country</label>
                        <input type="text" id="country" name="country" class="form-control">
                    </div>
                </div>


                <div class="col-xs-12">
                    <a href="javascript:void(0)" class="btn btn-primary" id="previous_step_1">Previous Step</a>
                    <button type="submit" class="btn btn-success">SEND FORM</button>
                </div>

            </div>
            <!--End Step_2-->


        </form>
    </div>
</div>

希望你能帮我解决这个问题，这样你就可以帮助我和其他需要这样做的人。

非常感谢

Answer 1

我找到了解决方案，而且是正确的做法，我留下了完整的代码和细节。

希望你学习。

非常感谢。

$(document).ready(function() {
    function adjustIframeHeight() {
        var $body   = $('body'),
            $iframe = $body.data('iframe.fv');
        if ($iframe) {
            // Adjust the height of iframe
            $iframe.height($body.height());
        }
    }

    // IMPORTANT: You must call .steps() before calling .formValidation()
    $('#profileForm')
        .steps({
            headerTag: 'h2',
            bodyTag: 'section',
   autoFocus: true,
   enableContentCache: true,
   transitionEffect: 'fade',
   transitionEffectSpeed: 170,
            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         = $('#profileForm').data('formValidation'), // FormValidation instance
                    // The current step container
                    $container = $('#profileForm').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         = $('#profileForm').data('formValidation'),
                    $container = $('#profileForm').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
                // $('#profileForm').formValidation('defaultSubmit');

                // For testing purpose
                $('#welcomeModal').modal();
            }
        })
        .formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            // This option will not ignore invisible fields which belong to inactive panels
            exclude: ':disabled',
            fields: {
                name: {
                    validators: {
                        notEmpty: {
                            message: 'The nombre is required'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: 'The email address is required'
                        },
                        emailAddress: {
                            message: 'The input is not a valid email address'
                        }
                    }
                },
    direction: {
                    validators: {
                        notEmpty: {
                            message: 'The direccion address is required'
                        }
                    }
                },
    comment: {
                    validators: {
                        notEmpty: {
                            message: 'The comment address is required'
                        }
                    }
                }
            }
        });
});

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

<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.2/js/bootstrap.min.js"></script>
<script src="http://formvalidation.io/vendor/formvalidation/js/formValidation.min.js"></script>
<script src="http://formvalidation.io/vendor/formvalidation/js/framework/bootstrap.min.js"></script>
<script src="http://formvalidation.io/vendor/jquery.steps/js/jquery.steps.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://formvalidation.io/vendor/jquery.steps/css/jquery.steps.css" rel="stylesheet"/>
<link href="http://formvalidation.io/vendor/formvalidation/css/formValidation.min.css" rel="stylesheet"/>
<div class="container">
 <div class="row">
     <div class="col-xs-12">
         <h3>Form Validation Steps</h3>
            
            

<!--Form-->
<form id="profileForm" method="post" class="form-horizontal">
    
    
    <h2>Step 1</h2>
    <section data-step="0">
    
     <div class="form-group">
         <label class="col-xs-3 control-label">Full Name: </label>
            <div class="col-xs-9">
                <input type="text" class="form-control" name="name" />
            </div>
        </div>
        
    </section>
    
    <h2>Step 2</h2>
    <section data-step="1">
     <div class="form-group">
         <label class="col-xs-3 control-label">Email: </label>
            <div class="col-xs-9">
                <input type="text" class="form-control" name="email" />
            </div>
        </div>
    </section>
    
    <h2>Step 3</h2>
    <section data-step="2">
     <div class="form-group">
         <label class="col-xs-3 control-label">You direction</label>
            <div class="col-xs-9">
                <input type="text" class="form-control" name="direction" />
            </div>
        </div>
    </section>
    
    <h2>Step 4</h2>
    <section data-step="3">
     <div class="form-group">
         <label class="col-xs-3 control-label">You comment</label>
            <div class="col-xs-9">
             <textarea name="comment" class="form-control" cols="20" rows="4"></textarea>
            </div>
        </div>
    </section>
    
    
</form>
<!--End Form-->


            
        </div>
    </div>
</div>


<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-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>Completed...</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

BootstrapValidator - 逐步验证隐藏的和特定的文本字段

BootstrapValidator - Validate text fields hidden and specific for stepwise

jquery

jqbootstrapvalidation