How to stop multiple kendo-tooltips appearing for the same element during validation - kendo-ui

Question

I'm attempting to use Kendo-Validator and Kendo-ToolTip to show validation messages as a tooltip. The problem I currently have is that multiple validation error messages appear against the HTML element. How do you stop that from happening?
Here's the HTML:
<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>
Here's the 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>
Here's the 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>

Answer 1

The following line was causing the duplicate message display:
$(".k-textbox").blur(function (event) {
The reason is because the kendo validation is fired as the element loses focus (onBlur) by default. Wiring the blur event, as shown above was causing the validation to happen again.