我正在使用Bootstrap验证器来确保在提交表单时填写所有字段。但我的验证器没有按预期工作!
这是JSFiddle:http://jsfiddle.net/3v3011e0/
如果您使用它并提交所有字段为空的表单,并将其中一个更改为非空,则所有字段都将变为绿色。这不应该发生。对于正常工作的场,它应该只是绿色。如图所示,用户名和密码为空,但显示为绿色。此图标仅显示用户名。我该如何解决这个问题?
HTML
<form action="#" method="POST" id="myForm">
<div class="form-group">
<input id="userField" type="text" name="username" placeholder="Enter user name" class="form-control" />
<input id="password" type="password" name="password" placeholder="Choose a password" class="form-control" />
<select id="myPicker" name="num" class="selectpicker form-control">
<option value="" selected="selected">Select number</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary">submit</button>
</div>
</form>
的Javascript
$(document).ready(function() {
$('#myForm').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
username: {
validators: {
notEmpty: {
message: 'The username is required and cannot be empty'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required and cannot be empty'
}
}
},
num: {
validators: {
notEmpty: {
message: 'Number is required and cannot be empty'
}
}
}
}
});
});
答案 0 :(得分:0)
我知道这是一个老问题,但我正在使用此插件的旧版本,bootstrapValidator,因为它附带了我正在使用的主题,SmartAdmin。
首先,这个插件有两个版本。
formvalidation.io(付费版),bootstrapValidator(免费版,直到.5.2?)
无论如何,它们是不同的,文档是不同的,所以请确保您使用的文档是正确的。
此用户遇到的问题是HTML标记不正确。当使用插件的默认初始化时,每个字段必须用class&#34; .form-group&#34;分隔。
<div class="form-group">
<input id="userField" type="text" name="username" placeholder="Enter user name" class="form-control" />
</div>
<div class="form-group">
<input id="password" type="password" name="password" placeholder="Choose a password" class="form-control" />
</div>
<div class="form-group">
<select id="myPicker" name="num" class="selectpicker form-control">
<option value="" selected="selected">Select number</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
http://jsfiddle.net/3v3011e0/7/
如果无法做到这一点,请尝试模拟复杂表单示例的初始化。 http://bootstrapvalidator.votintsev.ru/examples/complex-form/