JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2017.3.913/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2017.3.913/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2017.3.913/js/kendo.all.min.js"></script>
<div id="app"></div>
<script type="text/x-kendo-template" id="myTemplate">
<div id='container'>
<input class="k-radio" type="radio" id="rbPayWayCheck" name="rbPayWay" data-type="string" value="1" data-bind="checked:PayWay">
<label class="k-radio-label" for="rbPayWayCheck">支票</label>
<input class="k-radio" type="radio" id="rbPayWayTransfer" name="rbPayWay" data-type="string" value="2" data-bind="checked:PayWay">
<label class="k-radio-label" for="rbPayWayTransfer">匯款</label>
<label for="PayAccount" style="margin-left:13px">帳戶:</label>
<input type="text" name="PayAccount" data-bind="value:PayAccount" class="k-textbox" maxlength="50" />
<br/>
<button data-bind="click:BtnRunValidateClickEvent">執行驗證</button>
<label data-bind="text:vldMsg"></label>
</div>
</script>
JavaScript
var viewModel = kendo.observable({
PayWay: "2",
PayAccount: "",
Validator: null,
vldMsg:"",
BtnRunValidateClickEvent: function(e) {
if (this.Validator.validate()) {
this.set("vldMsg","pass");
} else {
this.set("vldMsg","fail");
}
}
});
var ValidatorObject= {
rules: {
PayAccountRequired: function(input) {
if (input.is("[name='PayAccount']")) {
var model = input.prop("kendoBindingTarget").source;
//如果選匯款,則帳戶必填
if (model.PayWay === "2" && input.val() === "") {
return false;
} else {
return true;
}
}
return true;
}
},
messages:{
PayAccountRequired:"使用匯款支付時請填帳戶"
}
};
var app = $("#app");
//取得樣板
var template = kendo.template($("#myTemplate").html());
//將資料倒入樣板
var contents = template(viewModel);
//將樣板倒入視窗
app.html(contents);
//將模型做BIND
kendo.bind($("#container"), viewModel);
//宣告驗證器 & 將驗證器存入VM
viewModel.Validator = $("#container").kendoValidator(ValidatorObject).getKendoValidator();