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