jqueryjqbootstrapvalidation

BootstrapValidator - Validate text fields hidden and specific for stepwise

As can validate text fields on a form that works in steps.

I have a form created you can see the example on this link http://jsfiddle.net/milindex/93j2bgmm/1/

Questions and doubts:

  1. It is possible to validate text fields with BoostrapValidator but using a link?

There is a link that goes to step number two, if the user does not complete the fields texts of step one, you can continue to the next step number two.

We can avoid this, is there any way to detect if the user has not completed text fields from step one, and validate by BoostrapValidator but from that link.

  1. In step two, the user can submit the form without completing text fields step number one.

Note: Some simple manner using the tool boostrapValidator.

Help resources:

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

Example Code:

<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>

Hope you can help me figure this out so you can help to me and others who need to do the same.

Thank you very much

Solution

  • I found the solution, and the right thing to do, I leave the complete code with toos details.

    I hope you learn.

    Thank you very much.

    $(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 -->