Kendo ui 如何在验证期间阻止同一元素出现多个剑道工具提示
我正在尝试使用剑道验证程序和剑道工具提示将验证消息显示为工具提示。我目前遇到的问题是,针对HTML元素出现了多条验证错误消息。你如何阻止这种情况发生 以下是HTML:Kendo ui 如何在验证期间阻止同一元素出现多个剑道工具提示,kendo-ui,kendo-tooltip,kendo-validator,Kendo Ui,Kendo Tooltip,Kendo Validator,我正在尝试使用剑道验证程序和剑道工具提示将验证消息显示为工具提示。我目前遇到的问题是,针对HTML元素出现了多条验证错误消息。你如何阻止这种情况发生 以下是HTML: <div id="example"> <div class="demo-section k-header"> <form id="tickets"> <h3>Book Tickets</h3> <
<div id="example">
<div class="demo-section k-header">
<form id="tickets">
<h3>Book Tickets</h3>
<ul>
<li>
<label for="fullname" class="required">Your Name</label>
<div style="display:inline-block">
<input type="text" id="fullname_1" name="fullname" class="k-textbox" placeholder="Full name" style="width: 200px;" />
<!--<input type="text" id="fullname_1" name="fullname" class="k-textbox" placeholder="Full name" required validationmessage="Enter {0}" style="width: 200px;" />-->
</div>
</li>
<li>
<label for="fullname" class="required">Your Name</label>
<div style="display:inline-block">
<input type="text" id="fullname_2" name="fullname" class="k-textbox" placeholder="Full name" style="width: 200px;" />
<!--<input type="text" id="fullname_2" name="fullname" class="k-textbox" placeholder="Full name" required validationmessage="Enter {0}" style="width: 200px;" />-->
</div>
</li>
<li class="accept">
<button class="k-button" type="submit">Submit</button>
</li>
<li class="status">
</li>
</ul>
</form>
</div>
以下是CSS:
<style scoped>
.k-textbox {
width: 11.8em;
}
.demo-section {
width: 700px;
}
#tickets {
width: 510px;
height: 323px;
margin: 0 auto;
padding: 10px 20px 20px 170px;
background: url('../content/web/validator/ticketsOnline.png') transparent no-repeat 0 0;
}
#tickets h3 {
font-weight: normal;
font-size: 1.4em;
border-bottom: 1px solid #ccc;
}
#tickets ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#tickets li {
margin: 7px 0 0 0;
}
label {
display: inline-block;
width: 90px;
text-align: right;
}
.required {
font-weight: bold;
}
.accept, .status {
padding-left: 90px;
}
.valid {
color: green;
}
.invalid {
color: red;
}
span.k-tooltip {
margin-left: 6px;
}
</style>
下面是JavaScript:
<script>
$(document).ready(function () {
var status = $(".status");
$(".k-textbox").blur(function (event) {
var tooltip = $("#tickets").kendoTooltip({
filter: ".k-invalid",
content: function (e) {
var errorMessage = $("#tickets").find("[data-for=" + e.target.attr("name") + "]");
return '<span class="k-icon k-warning"> </span>' + errorMessage.text();
}
});
var validator = $("#tickets").kendoValidator({
rules: {
required: function (input) {
var value = input.val();
if (value != null && value.length > 0)
return true
else return false;
},
customRule1: function (input) {
if (input.is("[name=fullname]")) {
return input.val() === "peter" || input.val() === "john";
}
return true;
}
},
messages: {
required: "Field is required",
customRule1: "User name must be either Peter or John"
}
});
if (validator.validate()) {
status.text("Hooray! Your tickets have been booked!")
.removeClass("invalid")
.addClass("valid");
} else {
status.text("Oops! There is invalid data in the form.")
.removeClass("valid")
.addClass("invalid");
}
});
});
</script>
</div>
以下行导致出现重复消息显示:
$(".k-textbox").blur(function (event) {
原因是,默认情况下,当元素失去对模糊的焦点时,会触发剑道验证。如上图所示,连接模糊事件导致验证再次发生