热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

这篇文章主要为大家详细介绍了bootStrapValidator和bootStrap-select验证不可用的解决办法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

如何解决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页面)



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插件使用教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • 本文详细介绍了Ionic框架的使用方法及其与Angular的集成。Ionic框架是一个强大的前端开发工具,适用于构建跨平台的移动应用程序。文章将探讨如何引入必要的CSS和JavaScript文件,并解释bundle.js中包含的核心功能,如路由等。 ... [详细]
  • 本文探讨了Java编程的核心要素,特别是其面向对象的特性,并详细介绍了Java虚拟机、类装载器体系结构、Java类文件和Java API等关键技术。这些技术使得Java成为一种功能强大且易于使用的编程语言。 ... [详细]
  • Asp.net MVC 中 Bundle 配置详解:合并与压缩 JS 和 CSS 文件
    本文深入探讨了 Asp.net MVC 中如何利用 Bundle 功能来合并和压缩 JavaScript 和 CSS 文件,提供了详细的配置步骤和示例代码,适合开发人员参考学习。 ... [详细]
  • 本文深入探讨了CART(分类与回归树)的基本原理及其在随机森林中的应用。重点介绍了CART的分裂准则、防止过拟合的方法、处理样本不平衡的策略以及其在回归问题中的应用。此外,还详细解释了随机森林的构建过程、样本均衡处理、OOB估计及特征重要性的计算。 ... [详细]
  • 本文将详细介绍如何在Bootstrap 5中使用五种不同的表单控件样式,包括输入框、选择器和文本区域等元素。 ... [详细]
  • window下kafka的安装以及测试
    目录一、安装JDK(需要安装依赖javaJDK)二、安装Kafka三、测试参考在Windows系统上安装消息队列kafka一、安装JDKÿ ... [详细]
  • Kafka Topic 数据管理与清理策略
    本文探讨了在生产环境中如何有效管理和定期清理Kafka Topic中的数据。介绍了基于时间、日志大小和日志起始偏移量三种清除方式,并重点讲解了基于时间的清除策略及其配置方法。 ... [详细]
  • 在使用 Spring Cloud Config 作为配置中心时,若在配置文件中指定了请求路径但未能生效,本文将探讨其原因及解决方案。 ... [详细]
  • 修复了Datepicker组件中,当字段值默认为null时,输入验证器直到选择日期后才被调用的问题。 ... [详细]
  • 前端常用的布局类型——前端布局
    1.Static静态布局固定宽高:2.Liquid流式布局宽高用百分比,按屏幕分辨率调整,布局不发生变化3.Adaptive自适应 ... [详细]
  • PHP中静态类与静态变量的应用差异探讨
    本文深入探讨了PHP编程语言中静态类与静态变量的具体应用及其差异性,旨在帮助开发者更好地理解和运用这些概念,以提升代码质量和效率。 ... [详细]
  • Web前端开发中Webpack项目的实用技巧总结
    本文探讨了在使用Webpack构建前端项目时的一些实用技巧,包括如何高效地使用移动端UI框架Mint UI和MUI,以及如何优化项目性能和用户体验。 ... [详细]
  • 如何解决PHP中时间获取不准确的问题
    本文探讨了在PHP开发过程中遇到的时间获取错误问题,并提供了详细的解决方案,包括通过修改配置文件和编程方法来调整时区设置。 ... [详细]
  • Consul 单节点与集群环境构建指南
    本文详细介绍了如何安装和配置 Consul 以支持服务注册与发现、健康检查等功能,包括单节点和集群环境的搭建步骤。 ... [详细]
  • 使用Bootstrap创建响应式渐变固定头部导航栏的方法
    本文详细介绍了如何利用Bootstrap框架构建一个具有渐变效果的固定顶部响应式导航栏,包括HTML结构、CSS样式以及JavaScript交互的完整实现过程。适合前端开发者和学习者参考。 ... [详细]
author-avatar
黄骏捷
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有