twitter-bootstrap Bootstrap 验证器 - 下拉列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32271432/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap validator- dropdown list
提问by ikramlim
This the HTML and JavaScript code:
这是 HTML 和 JavaScript 代码：
<html>
<head>
<style type="text/css">
#bootstrapSelectForm .selectContainer .form-control-feedback {
/* Adjust feedback icon position */
right: -15px;
}
</style>
<link href="css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="js/bootstrap-select.min.js" type="text/javascript"> </script>
</head>
<body>
<form id="bootstrapSelectForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Language</label>
<div class="col-xs-5 selectContainer">
<select name="language" class="form-control">
<option value=""></option>
<option value="arabic">Arabic</option>
<option value="english">English</option>
<option value="french">French</option>
<option value="german">German</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-xs-5 col-xs-offset-3">
<button type="submit" class="btn btn-default">Validate</button>
</div>
</div>
</form>
This is the code for JavaScript:
这是 JavaScript 的代码：
<script type="text/javascript">
$(document).ready(function() {
$('#bootstrapSelectForm')
.find('[name="language"]')
.selectpicker()
.change(function(e) {
// revalidate the language when it is changed
$('#bootstrapSelectForm').formValidation('revalidateField', 'language');
})
.end()
.formValidation({
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
excluded: ':disabled',
fields: {
language: {
validators: {
notEmpty: {
message: 'Please select your native language.'
}
}
}
}
});
});
</script>
</body>
</html>
I can't do the validation. I already did all the code but still can't find the solution.
我无法进行验证。我已经完成了所有代码，但仍然找不到解决方案。
采纳答案by kalpetros
Your code should look like this. The only thing missing for this to work is the formvalidation.js plugin which is not free.
您的代码应如下所示。唯一缺少的就是 formvalidation.js 插件，它不是免费的。
$(document).ready(function() {
$('#bootstrapSelectForm')
.find('[name="colors"]')
.selectpicker()
.change(function(e) {
// revalidate the color when it is changed
$('#bootstrapSelectForm').formValidation('revalidateField', 'colors');
})
.end()
.find('[name="language"]')
.selectpicker()
.change(function(e) {
// revalidate the language when it is changed
$('#bootstrapSelectForm').formValidation('revalidateField', 'language');
})
.end()
.formValidation({
framework: 'bootstrap',
excluded: ':disabled',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
colors: {
validators: {
callback: {
message: 'Please choose 2-4 colors you like most',
callback: function(value, validator, $field) {
// Get the selected options
var options = validator.getFieldElements('colors').val();
return (options != null && options.length >= 2 && options.length <= 4);
}
}
}
},
language: {
validators: {
notEmpty: {
message: 'Please select your native language.'
}
}
}
}
});
});
An alternative would be this (using the jquery.validate.js):
另一种方法是（使用 jquery.validate.js）：
$(document).ready(function () {
$('#bootstrapSelectForm').validate({
rules: {
language: {
required: true
}
},
highlight: function (element) {
$(element).closest('.control-group').removeClass('success').addClass('error');
},
success: function (element) {
element.text('OK!').addClass('valid')
.closest('.control-group').removeClass('error').addClass('success');
}
});
});
