我正在尝试验证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'
}
}
},}
});