码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-10-13 19:02:37      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:

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

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

标签:

原文地址:http://www.cnblogs.com/gmq-sh/p/4875412.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!