使用 Kendo UI 验证器如何隐藏默认验证错误消息并仅在工具提示上显示消息

Question

当前正在进行验证 correctly.The 唯一的问题是我只想在工具提示中显示错误消息，而不是通过输入元素旁边的跨度显示。如何隐藏默认显示？

我的CSS:

        <style scoped>
        .k-textbox {
            width: 11.8em;
        }

        .demo-section {
            width: 700px;
        }

        #tickets {
            width: 710px;
            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>

我的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" required 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" required style="width: 200px;" />
                    </div>
                </li>

                <li class="accept">
                    <button class="k-button" type="submit">Submit</button>
                </li>
                <li class="status">
                </li>
            </ul>
        </form>
    </div>

我的JavaScript:

       <script>
        $(document).ready(function () {

            var status = $(".status");

            var validator = $("#tickets").kendoValidator({
                rules: {
                    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"
                }
            });


            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();
                }
            });

            $("form").submit(function (event) {
                event.preventDefault();

                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>

Answer 1

为什么不用css？只需将此规则添加到您的样式中

.k-widget.k-tooltip-validation {
  display: none !important;
}