kendo-ui - 如何在验证期间停止为同一元素出现多个剑道工具提示

Question

我正在尝试使用 Kendo-Validator 和 Kendo-ToolTip 将验证消息显示为工具提示。我目前遇到的问题是针对 HTML 元素出现多个验证错误消息。你如何阻止这种情况发生？

这是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>

这是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>

Answer 1

以下行导致重复消息显示：

$(".k-textbox").blur(function (event) {

原因是因为默认情况下元素失去焦点（onBlur）时会触发 kendo 验证。如上所示，连接模糊事件会导致验证再次发生。