bootstrap的select2校验及不影响原来的格式

<style>
    .has-error .select2-choice, .has-error .select2-choices, .has-error.simple .select2-choice, .has-error.simple .select2-choices {
        border-color: #F40E33;
    }
</style>

<div class="col-sm-12 col-md-6 col-lg-5">
    <div class="form-group">
        <label for="jq-validation-email" class="col-sm-4 control-label">承运方:</label>
        <div class="col-sm-8">
            <select class="form-control x-select2" id="carrier" name="carrier">
                <option></option>
                #foreach($item in $!{result.suppliers})
                   <option value="$!{item.supplierId}" data-taxNo="$!{item.taxNo}">$!{item.supplier}</option>
                #end
            </select>
        </div>
    </div>
</div>
<div class="col-sm-12 col-md-6 col-lg-5">
    <div class="form-group">
        <label for="jq-validation-email" class="col-sm-4 control-label">发票号<font color=red>&nbsp;*&nbsp;</font>:</label>
        <div class="col-sm-8">
            <input class="form-control check notnull" id="invoiceNo" name="invoiceNo" type="text">
        </div>
    </div>
</div>

校验jquery:

// select2校验:change
        $(document).on("change", ".select2-offscreen", function () {
            var value = $(this).val();
            var id = $(this).attr("id");
            if (value == null || value == "") {
                $(this).addClass("myErrorClass");
                $("#s2id_"+id).parent().addClass("has-error");
            } else {
                $(this).removeClass("myErrorClass");
                $("#s2id_"+id).parent().removeClass("has-error");
            }
        });

        // 提交按钮点击时,校验select2
        function checkSelect2IsNull(){
            var resultFlag = false;
            var num = 0;
            $("select.select2-offscreen").each(function(){
                if($(this).hasClass("myErrorClass")){
                    var id = $(this).attr("id");
                    $("#s2id_"+id).parent().addClass("has-error");
                    //$("#s2id_"+id).css("border-color", "red").css("border", "1");
                    num++;
                }
            });
            if (num == 0){
                resultFlag = true;
            } else {
                resultFlag = false;
            }
            return resultFlag;
        }

此时调用checkSelect2IsNull()方法,即可校验select2框是否为空!!!还不回影响原来的布局!!!

时间: 2025-01-15 19:31:09

bootstrap的select2校验及不影响原来的格式的相关文章

bootstrap与Select2使用小结

这个select2组件的功能确实很强大,可以将图片放入到select里面随着文字一起显示. 组件的下载地址以及API说明地址: 1.Select2使用示例地址:https://select2.github.io/examples.html .http://select2.github.io/select2/ 2.Select2参数文档说明:https://select2.github.io/options.html 3.Select2源码:https://github.com/select2/s

bootstrap插件—Select2使用

实现效果: 1.显示数据图片 2.支持中文搜索 代码实现: Web前端代码: <select name="member" id="member"> <script src="/theme/<?=T_D?>/assets/select2-master/dist/js/select2.js" type="text/javascript" ></script> <link hre

php 表单校验函数库(判断email格式是否正确、http地址是否合法有效、手机号码是否合法)

/** * 表单校验函数库 */ /** * 判断email格式是否正确 * @param $email */ function is_email($email) { return strlen($email) > 6 && preg_match("/^[\w\-\.][email protected][\w\-\.]+(\.\w+)+$/", $email); } //判断http 地址是否合法 function check_url($url) { return

利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件

表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个性化的需求,使得我们用这些插件的默认机制并不能完成这些功能,所以要根据自己的需要去改造它们(毕竟自己还不到那个写一个完美的校验框架的层次).我用过formValidation这个校验框架,虽然它跟bootstrap配合地很好,但是校验风格太死板,不太满足个性化的场景:后来我找到了jquery.val

(转)Bootstrap 之 Metronic 模板的学习之路 - (7)GULP 前端自动化工具

https://segmentfault.com/a/1190000006738327 初步了解 Metronic 的结构和应用后,我们就可以在项目中应用起来了.考虑到实际项目应用时,会有很多文件需要修改调整并压缩处理,这时候我们就会用到我们的<前端自动化神器 (Gulp)>,鉴于 gulp 的内容比较多,为了不打乱 Metronic 系列,就单独列了一篇<初探前端自动化神器 (Gulp)>.本文不对 gulp 进行详细阐述,只保留和 Metronic 相关部分. Gulp is

bootstrap图片剪裁预览上传

效果图预览: 用到的图片剪裁插件:http://www.htmleaf.com/jQuery/Image-Effects/201504211716.html 前段ui框架:bootstrap3 java后端框架:spring + mybstis 说明:如果前端ui用的不是bootstrap的框架,则调过第一步,直接将第二步的页面地址作为弹出框的地址即可,然后在做修改 1.首先说一下bootstrap的模态框: 一般的打开模态框要在页面上隐藏一段html代码然后用$("#Id").mod

Springboot + redis + 注解 + 拦截器来实现接口幂等性校验

Springboot + redis + 注解 + 拦截器来实现接口幂等性校验 1. SpringBoot 整合篇 2. 手写一套迷你版HTTP服务器 3. 记住:永远不要在MySQL中使用UTF-8 4. Springboot启动原理解析 一.概念 幂等性, 通俗的说就是一个接口, 多次发起同一个请求, 必须保证操作只能执行一次比如: 订单接口, 不能多次创建订单 支付接口, 重复支付同一笔订单只能扣一次钱 支付宝回调接口, 可能会多次回调, 必须处理重复回调 普通表单提交接口, 因为网络超时

JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)

前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能覆盖似乎不太现实,博主挑选了一些自认为比较常用的功能在此分享给各位园友.源码也在这篇统一给出.好了,不多说废话,开始我们的干货之旅吧. bootstrap table系列: JS组件系列——表格组件神器:bootstrap table JS组件系列——表格组件神器:bootstrap table(二

strut2 输入校验2

struts2基于xml配置方式对Action中的所有方法进行的输入校验: 使用xml方式配置方式实现输入校验时,Action也需要继承ActionSupport,并且提供校验文件,校验文件和action类放在同一个包下.文件的取名为ActionClassName-validation.xml,其中ActionClassName为action类的简单类名,validation为固定写法.如果Action类为cn.itcast.UsrAction,那么文件名为UserAction-validati