zoukankan      html  css  js  c++  java
  • 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框是否为空!!!还不回影响原来的布局!!!

  • 相关阅读:
    手风琴效果
    开关门
    常用的一些获取尺寸的方法
    话话js中的事件监听
    数组去重
    百度地图 之 热力图
    小程序 之 百度智能小程序(第二章)
    小程序 之 百度智能小程序(第一章)
    javascript 之 继承与闭包
    浅谈prototype与__proto__、constructor三者之间的关系
  • 原文地址:https://www.cnblogs.com/gmq-sh/p/4875412.html
Copyright © 2011-2022 走看看