kendo-ui - With Kendo UI validator how to hide default validation error message and show message on tooltip only

Question

The validation is currently happening correctly.The only issue is that I would like to show the error message in the tooltip only and not through a span next to the input element. How do I hide the default display?

My 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>

My 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>

My 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;
}