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框是否为空!!!还不回影响原来的布局!!!

  • 相关阅读:
    获取设备信息
    获取Mac地址
    常用正则
    几个字段相同的纪录去重留下主键最小的一条纪录
    mysql查询数据库中包含某字段(列名)的所有表
    nginx反向代理
    Eureka参数配置项详解
    html5验证自适应
    synchronized对象解析
    多线程进行数据同步
  • 原文地址:https://www.cnblogs.com/gmq-sh/p/4875412.html
Copyright © 2011-2022 走看看