bootstrapValidator bootstrap-select验证不可用的解决办法_JavaScript

如何解决bootStrapValidator bootStrap-select验证不可用，只要三步：

思路：把多选下拉框的选中值，赋给一个隐藏的input组件，再对input组件进行验证（bootstrap-validator默认情况下hidden,disabled的组件不验证，可以通过excluded属性更改）,具体步骤如下：

1.表单验证初始化（js）

代码如下

复制代码

$('#myModalForm').bootstrapValidator({

message:'This value is not valid',

excluded : [':disabled'],//[':disabled', ':hidden', ':not(:visible)'] //设置隐藏组件可验证

feedbackIcons: {

valid:'glyphicon glyphicon-ok',

invalid:'glyphicon glyphicon-remove',

validating:'glyphicon glyphicon-refresh'

fields: {

roleid: {

message:'角色无效',

validators: {

notEmpty: {

message:'角色不可为空'

}

}）

2.bootStrap-select组件配置（jsp页面）

代码如下

复制代码

<inputtype="hidden"class="form-control"id="roleid"name="roleid">

<selectclass="selectpicker form-control"multipledata-width="60%"id="roleidForSelect"title="---请选择---"></select>

3.在多选下拉框选择完毕后，为对应的input赋值

代码如下

复制代码

$('#roleidForSelect').on('hidden.bs.select',function(e) {//该方法注册到$(function(){})函数中

vartmpSelected = $('#roleidForSelect').val();

if(tmpSelected !=null){

$('#roleid').val(tmpSelected);

}else{

$('#roleid').val("");

}

//由于input为hidden，验证会出现一些bug，此处手动验证隐藏的input组件

$('#myModalForm').data('bootstrapValidator').updateStatus('roleid','NOT_VALIDATED').validateField('roleid');

});

bootstrapValidator bootstrap-select验证不可用的解决办法