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

  • 相关阅读:
    点击bindingNavigatorAddNewItem 关联的dataGridView不会新增一行
    dataGridView的使用经验
    Mybatis源码分析:Resources
    Mybatis源码分析:BaseBuilder
    反射类 Modifier类
    Mybatis源码分析:SqlSessionManager
    Mybatis源码分析:SqlSessionFactory
    Mybatis源码分析:环境设置Environment
    Mybatis源码分析:类型处理器TypeHandler
    Mybatis源码分析:MapperRegistry
  • 原文地址:https://www.cnblogs.com/gmq-sh/p/4875412.html
Copyright © 2011-2022 走看看