如何在验证期间停止针对同一元素出现的多个Kendo工具提示 [英] How to stop multiple kendo-tooltips appearing for the same element during validation

问题描述

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

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?

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

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>

推荐答案

以下行导致显示重复的消息:

The following line was causing the duplicate message display:

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

原因是因为默认情况下，由于元素失去焦点(onBlur)，因此会触发kendo验证.如上所示，连接模糊事件导致验证再次发生.

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.

这篇关于如何在验证期间停止针对同一元素出现的多个Kendo工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！