Question

在我的登录视图中。我正在使用bootstrap验证器https://github.com/nghuuphuoc/bootstrapvalidator/tree/v0.5.2。对于php方面的东西，我使用codeigniter MVC framework 3.0.3

我必须输入名为username和password的字段以及一个名为user_info的隐藏输入字段。

使用bootstrap验证器，我要做的就是将多个输入字段验证为一个。

但继续在

下面发生火灾错误

图像

这是我的登录表单

<?php echo $header;?>
<?php echo form_open_multipart('admin/common/login', array('id' => 'login-form','role' => 'form'));?>
    <div class="row" id="login-panel">
        <div class="col-lg-offset-3 col-lg-6 col-md-offset-3 col-md-6 col-sm-12 col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h1 class="panel-title"><?php echo $heading_title;?></h1>
                </div>
                <div class="panel-body">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon" id="basic-addon1"><i class="fa fa-user"></i></span>
                            <input type="text" name="username"  class="form-control" value="" placeholder="Username">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon" id="basic-addon2"><i class="fa fa-lock"></i></span>
                            <input type="password" name="password" class="form-control" value="" placeholder="Password">
                        </div>
                    </div>
                    <input type="hidden" name="user_info" />
                </div><!-- . panel-body -->
                <div class="panel-footer">
                    <div class="text-right">
                        <button type="submit" class="btn btn-primary">Login</button>
                    </div>
                </div><!-- . panel-footer -->
            </div><!-- . panel panel-default -->
        </div>
    </div><!-- # login-panel -->
<?php echo form_close();?>

<script type="text/javascript">
$(document).ready(function() {
    $('#login-form')
        .bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            user_info: {
                excluded: false,
                validators: {
                    notEmpty: {
                        message: 'Please fill out each field'
                    }
                }
            }
        }
    })
    .on('keyup', 'input[name="username"], input[name="password"]', function(e) {
        var y = $('#login-form').find('[name="username"]').val(),
            m = $('#login-form').find('[name="password"]').val(),

        // Set the user_info field value
        $('#login-form').find('[name="user_info"]').val(y === '' || m === '' ? '' : [y, m].join('.'));

        // Revalidate it
        $('#login-form').bootstrapValidator('revalidateField', 'user_info');
    });
}); 
</script>
<?php echo $footer;?>

问题：如何使bootstrap验证器正确验证多个输入字段？

Answer 1

在这里保持;代替,：

m = $('#login-form').find('[name="password"]').val(),

脚本：

$(document).ready(function() {
    $('#login-form')
        .bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            user_info: {
                excluded: false,
                validators: {
                    notEmpty: {
                        message: 'Please fill out each field'
                    }
                }
            }
        }
    })
    .on('keyup', 'input[name="username"], input[name="password"]', function(e) {
        var y = $('#login-form').find('[name="username"]').val(),
            m = $('#login-form').find('[name="password"]').val();  //<= keep ; here 

        // Set the user_info field value
        $('#login-form').find('[name="user_info"]').val(y === '' || m === '' ? '' : [y, m].join('.'));

        // Revalidate it
        $('#login-form').bootstrapValidator('revalidateField', 'user_info');
    });
});

Answer 2

这就是我从他们的website中得到的东西。它使用添加隐藏字段并将数据合并到隐藏字段中的概念。然后，我们可以像常规字段一样验证新的隐藏字段。

希望这会有所帮助。

bootstrapValidator将多个输入验证为一个不起作用

2 个答案: