接到一個需求，是需要將畫面上的Validation 進行客制化的設計!
一般來說，原本的 Kendo UI Validator 顯示畫面如下：
使用者的需求如下：
1、發生問題輸入元件要變成紅色外框
2、預設不顯示訊息
3、要透過ToolTip的方式顯示
4、當滑鼠移到元件上時，就顯示ToolTip
作法如下：
1、首先需要設定每一個INPUT的專屬訊息
<label class="required" for="fullname">Your Name</label>
<input class="k-textbox" id="fullname" name="fullname" placeholder="Full name" required="" type="text" validationmessage="Please enter {0}" />
<span class="k-invalid-msg" data-for="fullname"></span><!-- 專屬的顯示 -->
2、撰寫CSS
/*toolTip 的顏色*/
.k-widget.k-tooltip {
border-color: rgb(197, 197, 197);
background-color: red;
color: white;
}
/*讓textbox顯示有紅框,因為此方法為預設的行為。*/
.k-invalid,
.k-textbox.k-invalid {
border: 1px solid #ee0101;
}
/*加入紅框給kendo ui的元件使用*/
.UIBorderRed {
border: 1px solid #ee0101 !important;
}
/*預設的errorTip樣式*/
.errorTip {
background-color: #ee0101;
color: #fff;
float: right;
font-size: 12px;
border: 2px solid #ddd;
-moz-box-shadow: 0 0 6px #000;
-webkit-box-shadow: 0 0 6px #000;
padding: 4px 10px 4px 10px;
border-radius: 6px;
-webkit-border-radius: 6px;
position: absolute;
opacity: 0.87;
display: none !important;
}
/*顯示的errorTip樣式*/
.errorTipShow {
background-color: #ee0101;
color: #fff;
float: right;
font-size: 12px;
border: 2px solid #ddd;
-moz-box-shadow: 0 0 6px #000;
-webkit-box-shadow: 0 0 6px #000;
padding: 4px 10px 4px 10px;
border-radius: 6px;
-webkit-border-radius: 6px;
position: fixed;
opacity: 0.87;
display: block !important;;
}
3、建立主要程式
//主要的程式：驗證控制項
var validator = $("#tickets").kendoValidator({
rules: {
required: function (input) {
return PICRule(input);//客制化rule
}
},
errorTemplate: kendo.template( '<div class="errorTip k-widget k-tooltip k-popup"><div class="k-tooltip-content">#=message#</div><div class="k-callout k-callout-s"></div></div>')//樣版
});
4、設計RULE
var PICRule = function (input){
var e = input.filter("[type=checkbox]").length && !input.is(":checked"),//如果是checkbox
a = input.val();//輸入值
//驗證規則，判斷是不是null或是不是一個物件，
var _ = function (t, e) { return t.length ? null != t[0].attributes[e] : !1 };
var ChangeBorder = function (Input) {
return {
Add: function AddClass() {
var str = $(Input).parent();
if (str != undefined && (str.hasClass("k-state-default") || str.hasClass("k-widget") )) {
if ($(Input).parent().find('.k-state-default').length > 0) {
// log($(Input));
$(Input).parent().find('.k-state-default').addClass("UIBorderRed");
} else {
// log($(Input));
$(Input).parent().addClass("UIBorderRed");
}
}
if ($(Input).attr('type') == "checkbox") {
//log($(Input));
$(Input).parent().addClass("UIBorderRed");
}
},
Remove: function RemoveClass() {
//log($(Input));
$(Input).parent().find('.UIBorderRed').andSelf().removeClass("UIBorderRed");
}
}
};
var requiredChangeBorder = function (input, e, a) {
var changeBorder = ChangeBorder(input);
if (!("" === a || !a || e)) {
changeBorder.Remove();
}
else {
changeBorder.Add();
}
};
requiredChangeBorder(input, e, a);
5、針對需要使用的資料進行綁定
//為kendo ui 客制化元件
$("form .k-widget").bind("mouseenter",function () {
var $inputElement = $(this).find(".k-invalid");
var position = $(this).position();
//log(position.top);
// log(position.left);
if($inputElement.length >0){//有該元素在
var elementName = "div[data-for='" + $inputElement.attr('name') + "']";
//log(elementName);
$(elementName).addClass('errorTipShow').css({"left" : position.left ,"top" : position.top - 25});
}
}).bind("mouseleave",function () {
var $inputElement = $(this).find(".k-invalid");
var elementName = "div[data-for='" + $inputElement.attr('name') + "']";
$(elementName).removeClass('errorTipShow').removeAttr('style');
});
//為input類型的元件
$("form :input").bind("mouseenter",function () {
var $inputElement = $(this);
var position = $(this).position();
if (!$(this).parent().hasClass("k-widget") && !$(this).parent().parent().hasClass("k-widget")){//排除Kendo UI複合元件
//log($(this).parent());
if($inputElement.hasClass("k-invalid")){//如果有錯誤發生
var elementName = "div[data-for='" + $inputElement.attr('name') + "']";
//log(elementName);
$(elementName).addClass('errorTipShow').css({"left" : position.left ,"top" : position.top - 25});
}
}
}).bind("mouseleave",function () {
var $inputElement = $(this);
var elementName = "div[data-for='" + $inputElement.attr('name') + "']";
$(elementName).removeClass('errorTipShow').removeAttr('style');;
});
最後測試一下結果：
附上檔案
圖1
圖2
圖3
請在文件最後面的地方加上
