引导主题的选项卡式窗格中的验证

Question

i am performing validations on the text fields i the given theme, i have 3 tabs, and the submit button is in the 3rd tab, the validation actually works but no notification for users like something is missing in some of the fields, i am attaching a screen shot. can you please guide me how to redirected to the field which is empty on submit click.

<div class="container-fluid">
            <div class="row-fluid">

                <!--/span-->
                <div class="span9" id="content">
                    <!-- morris stacked chart -->
                    <div class="row-fluid">
                        <!-- block --><!-- /block -->
                    </div>

                    <div class="row-fluid">
                        <!-- block --><!-- /block -->
                    </div>

                    <!-- wizard -->
                    <div class="row-fluid section">
                        <!-- block -->
                        <div class="block">
                            <div class="navbar navbar-inner block-header">
                                <div class="muted pull-left"><strong>Doctor Name : <?php echo $_SESSION['doctorname']; ?> 
                                    </strong></div>
                            </div>
                            <div class="block-content collapse in">
                                <div class="span12">
                                    <div id="rootwizard">
                                        <div class="navbar">
                                            <div class="navbar-inner">
                                                <div class="container">
                                                    <ul>
                                                        <li><a href="#tab1" data-toggle="tab">Step 1</a></li>
                                                        <li><a href="#tab2" data-toggle="tab">Step 2</a></li>
                                                        <li><a href="#tab3" data-toggle="tab">Step 3</a></li>

                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="bar" class="progress progress-striped active">
                                            <div class="bar"></div>
                                        </div>
                                        <div class="tab-content">
                                            <div class="tab-pane" id="tab1">
                                                <form name="form" id="form" class="form-horizontal" action="#" method="POST">
                                                    <fieldset>
                                                        <div class="control-group">
                                                            <label class="control-label" for="focusedInput">Name</label>
                                                            <div class="controls">
                                                                <input name="pname" class="input-xlarge focused" id="focusedInput" type="text" value="" required>
                                                            </div>
                                                        </div>
                                                        <div class="control-group">
                                                            <label class="control-label" for="email">Email</label>
                                                            <div class="controls">
                                                                <input name="pemail" class="input-xlarge focused" id="focusedInput" type="text" value="" required>
                                                            </div>
                                                        </div>                                                   
                                                        <div class="control-group">
                                                            <label>We would like to post your comments to internet rating sites, while we may use your name or an alias name. Please select your desire:</label>

                                                        </div>
                                                        <div class="control-group">
                                                            <label class="control-label" for="focusedInput"></label>
                                                            <div class="controls">
                                                                <p>
                                                                    <label>
                                                                        <input type="radio" name="choice" value="yes" id="choice_0">
                                                                        Yes, use my name as entered above</label>
                                                                    <label>
                                                                        <input type="radio" name="choice" value="no" id="choice_1" onChange="enabletextbox();">
                                                                        Use the alias name, as I enter below</label>
                                                                    <input id="alias" name="alias" type="text" class="input-xlarge focused">
                                                                </p>
                                                            </div>

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


                                            <div class="tab-pane" id="tab2">

                                                <fieldset>
                                                    <?php
                                                    $i = 1;
                                                    $counter = 1;
                                                    $count = 1;
                                                    while ($row = mysqli_fetch_array($questions)) {
                                                        ?>
                                                        <div class="control-group">

                                                            <label class="control-label" for="focusedInput">(<?php echo $counter; ?>)
                                                                <?php
                                                                $questionid = $row['question_id'];
                                                                $question = $row['question'];
                                                                ?>
                                                                <input type="hidden" name="questionid[<?php echo $counter; ?>]" value="<?php echo $questionid; ?>" />
                                                                <input type="hidden" name="question[<?php echo $counter; ?>]" value="<?php echo $question; ?>" />
                                                                <?php echo $row['question']; ?></label>
                                                                <div class="controls">
                                                                <?php
                                                                if ($row['answer_type'] == "Ratings") {
                                                                    echo "<p>

                                                                    Low<input type='radio' name='rating$counter' value='1' id='rating_0'>                                                                                                         
                                                                    <input type='radio' name='rating$counter' value='2' id='rating_1'>                                                         
                                                                    <input type='radio' name='rating$counter' value='3' id='rating_2'>                                                          
                                                                    <input type='radio' name='rating$counter' value='4' id='rating_3'>                                                      
                                                                    <input type='radio' name='rating$counter' value='5' id='rating_4'>High                                                   

                                                                </p>
                                                                                                                                ";
                                                                    $i++;
                                                                } else if ($row['answer_type'] == "Comments") {
                                                                    echo "<textarea name='answer$count' cols='' rows=''></textarea>";
                                                                }
                                                                echo "<br />";
                                                                $counter++;
                                                                $count++;
                                                                ?>

                                                            </div>
                                                        </div>
                                                    <?php } ?>                                               
                                                </fieldset>

                                            </div>

                                            <div class="tab-pane" id="tab3">
                                                <fieldset>
                                                    <div class="control-group">
                                                        <label class="control-label" for="focusedInput">Testimonial about your care by <?php echo $_SESSION['doctorname']; ?></label>
                                                        <div class="controls">
                                                            <textarea name="review" cols="5" rows="5" required></textarea>
                                                        </div>

                                                    </div>
                                                    <div class="form-actions">
                                                        <input type="submit" class="btn btn-primary" value="Save & Press Finish"></input>                                                
                                                    </div>
                                                </fieldset>
                                                </form>
                                            </div>



                                            <ul class="pager wizard">
                                                <li class="previous first" style="display:none;"><a href="javascript:void(0);">First</a></li>
                                                <li class="previous"><a href="javascript:void(0);">Previous</a></li>

                                                <li class="next"><a href="javascript:void(0);">Next</a></li>
                                                <li class="next finish" style="display:none;"><a href="javascript:;">Finish</a></li>
                                            </ul>
                                        </div>  
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /block -->
                    </div>

                </div>
            </div>
            <hr>
            <footer>
                <p>&copy; Versasia Infosoft Pvt. Ltd. 2014</p>
            </footer>

            <!--/.fluid-container-->
            <link href="vendors/datepicker.css" rel="stylesheet" media="screen">
            <link href="vendors/uniform.default.css" rel="stylesheet" media="screen">
            <link href="vendors/chosen.min.css" rel="stylesheet" media="screen">

            <link href="vendors/wysiwyg/bootstrap-wysihtml5.css" rel="stylesheet" media="screen">

            <script src="vendors/jquery-1.9.1.js"></script>
            <script src="bootstrap/js/bootstrap.min.js"></script>
            <script src="vendors/jquery.uniform.min.js"></script>
            <script src="vendors/chosen.jquery.min.js"></script>
            <script src="vendors/bootstrap-datepicker.js"></script>

            <script src="vendors/wysiwyg/wysihtml5-0.3.0.js"></script>
            <script src="vendors/wysiwyg/bootstrap-wysihtml5.js"></script>

            <script src="vendors/wizard/jquery.bootstrap.wizard.min.js"></script>


            <script src="assets/scripts.js"></script>
            <script>
            $(function() {
                $(".datepicker").datepicker();
                $(".uniform_on").uniform();
                $(".chzn-select").chosen();
                $('.textarea').wysihtml5();

                $('#rootwizard').bootstrapWizard({onTabShow: function(tab, navigation, index) {
                        var $total = navigation.find('li').length;
                        var $current = index + 1;
                        var $percent = ($current / $total) * 100;
                        $('#rootwizard').find('.bar').css({width: $percent + '%'});
                        // If it's the last tab then hide the last button and show the finish instead
                        if ($current >= $total) {
                            $('#rootwizard').find('.pager .next').hide();
                            $('#rootwizard').find('.pager .finish').show();
                            $('#rootwizard').find('.pager .finish').removeClass('disabled');
                        } else {
                            $('#rootwizard').find('.pager .next').show();
                            $('#rootwizard').find('.pager .finish').hide();
                        }
                    }});
                $('#rootwizard .finish').click(function() {
                    alert('Finished!, Starting over!');
                    $('#rootwizard').find("a[href*='tab1']").trigger('click');
                });
            });
            </script>

Answer 1

What you are probably going to have to do for this is set up some sort of case in JS where it checks the fields validity before moving to the next tab (this is quick pseudocode)

on click for next step

if ( all fields are valid )
    go to next tab like normal
else if 
    .focus on field that is not complete