bootstrapValidator bootstrap

bootstrapValidator bootstrap

如何解决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: {

http:// message:http:// '角色不可为空'

}

}

}

}

}）

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

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

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

var tmpSelected = $('#roleidForSelect').val();

if(tmpSelected != null){

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

}else {

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

}

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

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

});

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap Table使用教程

Bootstrap插件使用教程

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。