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

  • 相关阅读:
    leetcode——91.解码方法
    leetcode——64.最小路径和
    Layui上传图片2.0版
    LINQ中判断日期时间段
    Http基础
    Js中数组,字符串的常用方法
    C#数组,ArrayList,List区别
    08-01 通过线性回归了解算法流程
    08-00 课程习得
    C-02 推荐系统
  • 原文地址:https://www.cnblogs.com/gmq-sh/p/4875412.html
Copyright © 2020-2023  润新知