Bootstrap验证器 - 下拉列表 [英] Bootstrap validator- dropdown list
本文介绍了Bootstrap验证器 - 下拉列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是HTML和JavaScript代码：
This the HTML and JavaScript code:
<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>
这是JavaScript的代码：
This is the code for 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.
推荐答案
您的代码应如下所示。唯一缺少的是formvalidation.js插件，它不是免费的。
Your code should look like this. The only thing missing for this to work is the formvalidation.js plugin which is not free.
$(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.'
}
}
}
}
});
});
另一种选择是（使用jquery.validate.js）：
An alternative would be this (using the 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');
}
});
});
这篇关于Bootstrap验证器 - 下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
