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