Question

我正在使用bootstrap表单向导，并希望在下一个按钮单击时验证表单。我使用.each（）函数来验证选项卡2中的每个字段。

这是我要验证的字段

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

为此我有wriiten jquery来验证选项卡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>

当用户单击下一步按钮并且数据未保存在db

中时，无法验证此字段

Answer 1

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

Answer 2

试试这个，它的工作。

    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);
                            }
                        });
                    }
                }
            }
        });

Bootstrap表单向导验证

2 个答案: