bootstrapValidator Validating multiple inputs as one not working

Question

On my login view. I am using bootstrap validator https://github.com/nghuuphuoc/bootstrapvalidator/tree/v0.5.2. For the php side of thing I use codeigniter MVC framework 3.0.3

I have to input fields called username and password and one hidden input field called user_info.

With bootstrap validator what I am tring to do is validate multple input fields as one.

But keep on getting this fire bug error below

Image

Here is my login form

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

Keep a ; instead of , here:

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

Script:

$(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');
    });
});