Подтвердите форму Bootstrap на кнопке отправки

Question

Я пытаюсь проверить форму Bootstrap, чтобы проверить, являются ли текстовые области пустыми. если нет, то это расширяет нижний div. Но ничего не происходит, когда я нажимаю кнопку «Отправить», это сразу открывает коллапс <div>.

, вот мой код:

<form class="needs-validation" id="idform" data-toggle="validator" role="form" novalidate>
                <div class="form-group">
                    <div class="row margin-top">
                        <div class="col-md-3 col-xs-3"></div>
                        <div class="col-md-1 col-xs-1">Username:</div>
                        <div class="col-md-5 col-xs-5"><p style="display: inline-block;text-align: right;"></p><input type="text" id="username" class="textfield" name="username" required></div>
                        <div class="col-md-3"></div>    
                    </div>
                </div>
                <div class="form-group">
                    <div class="row" style="margin-top: 1%;">
                        <div class="col-md-3 col-xs-3"></div>
                        <div class="col-md-1 col-xs-1">Password:</div>
                        <div class="col-md-5 col-xs-5"><p style="display: inline-block;text-align: right;"></p><input type="password" id="password" class="textfield" name="password" required></div>
                        <div class="col-md-3"></div>    
                    </div>
                </div>
                <div class="row" style="margin-top: 2%;">
                    <div class="col-md-4 col-xs-4"></div>
                    <div class="col-md-2 col-xs-2"><button data-toggle="collapse" aria-expanded="false" aria-controls="collapseExample" href="#collapseExample" type="submit" class="btn button btn-block" id="login" width="100">Login</button></div>
                    <div class="col-md-2 col-xs-2 height-button"><button class="btn button btn-block" id="register">Register</button></div>
                    <div class="col-md-4 col-xs-4"></div>   
                </div>
            </form>

и JQuery:

$('#idform').bootstrapValidator({
feedbackIcons: {
    valid: 'glyphicon glyphicon-ok',
    invalid: 'glyphicon glyphicon-remove',
    validating: 'glyphicon glyphicon-refresh'
},
fields: {
    username: {
        validators: {
            notEmpty: {
                message: 'Please Enter your username'
            },
        }
    },
    password: {
        validators: {
            notEmpty: {
                message: 'Enter your password'
            }
        }
    },
}
    });