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

Question

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

我必须输入名为用户名和密码的字段以及一个名为 user_info 的隐藏输入字段。

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

但继续收到下面的这个 fire bug 错误

图片

这是我的登录表单

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

Question: How can I make bootstrap validator validate multiple input fields as one correctly?

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 将多个输入验证为一个不工作

bootstrapValidator Validating multiple inputs as one not working

javascript

jquery

twitter-bootstrap

codeigniter

bootstrapvalidator