Bootstrap form wizard validation

Question

i m using bootstrap form wizard and want to validate form on next button click. im using .each() function to validate each field in tab 2.

and this the field i want to validate

<div class="tab-pane" id="tab2">
        <table class="table table-striped b-t b-light text-sm">
            <thead>
                    <tr>
                        <th>ID</th>
                        <th>Quest</th>
                    </tr>
            </thead>
                <tbody>
                    <?php foreach ($interview as $interview) { ?>
                        <tr>
                            <td ><?php echo $interview['id']; ?></td>
                            <td>
                                <?php echo $interview['question']; ?>
                            </td>
                            <td><input type='text' name='name' class='abc' placeholder='Enter Your Answer'></td> 
                        </tr>
                    <?php } ?>  
                </tbody>
        </table>
    </div>

and for this i have wriiten jquery to validate each field on tab 2

<script>
            $(document).ready(function() {
                $('#rootwizard').bootstrapWizard({onNext: function(tab, navigation, index) {
                    if(index==2) {
                        // Make sure we entered the name
                         $('.step2').on("click",function (){ 
                            $('.abc').each(function() {
                            alert('You must enter all filelds');
                            $('#name').focus();
                            }); 
                            });
                        }
                }});    
                window.prettyPrint && prettyPrint()
                $('.next').click( function(){
                   if(!$('.next').hasClass('step2'))
                $('.next').addClass('step2'); 
                });
            }); 
    </script>

not able to validate this filed when user click next button and data is not saved in db

Answer 1

Try this, its working.

    var $validator = $('#register_form').validate({
            rules:{
                name: {
                    required: true
                }
            }
        });
    $('#wizard').bootstrapWizard({
            'onNext': function(tab,navigation,index){
                var wizard = this;
                if(index == 1){
                    var $valid = $('#register_form').valid();
                    if(!$valid){
                        $validator.focusInvalid();
                        return false;
                    }
                    else
                    {
                        $.ajax({
                            type: 'POST',
                            url: 'Process.php',
                            data: data,
                            success: function(data){
                                wizard.show(2);
                            }
                        });
                    }
                }
            }
        });

Answer 2

<script>
            $(document).ready(function() {
                $('#rootwizard').bootstrapWizard({onNext: function(tab, navigation, index) {
                    if(index==3) {
                        // Make sure we entered the name
                          //class in input of tab2
                            $('.abc2').each(function() {
                            // if empty input ?

                             if($(this).value ==''){
                                alert('empty input');
                            $('#rootwizard').bootstrapWizard('show',2);
                                 exit;
                             }else{ }


                        }
                }});    
                window.prettyPrint && prettyPrint()
                $('.next').click( function(){
                   if(!$('.next').hasClass('step2'))
                $('.next').addClass('step2'); 
                });
            }); 
    </script>