Validator TagHelper Overview

The Telerik UI Validator TagHelper for ASP.NET Core is a server-side wrapper for the Kendo UI Validator widget.

The Validator offers options for implementing client-side form validation.

Telerik UI for ASP.NET Core Ninja image

The Validator is part of Telerik UI for ASP.NET Core, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Initializing the Validator

The following example demonstrates how to define the Validator by using the Validator TagHelper.

    @{
        var messages = new Dictionary<string, string>() { { "custom", "Please choose another Start Time." } };
        var rules = new Dictionary<string, string>() { { "custom", "customFunction" } };
    }
    <form id="ticketsForm" kendo-validator="true" kendo-messages="messages" kendo-rules="rules">
        <ul id="fieldlist">
            <li>
                <label for="fullname" class="required">Your Name</label>
                @(Html.Kendo().TextBox()
                    .Name("fullname")
                    .HtmlAttributes(new { placeholder = "Full name", required = "required", style = "width:220px" })
                )
            </li>
        </ul>
    </form>
    <script>
        function customFunction(input) {

            if (input.attr('name') === "time" && input.val() == "14:00") {
                return false;
            }

            return true;
        }

        $(document).ready( function () {
            var validator = $("#ticketsForm").data("kendoValidator");
            var validationSummary = $("#validation-summary");

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

                if (validator.validate()) {
                    validationSummary.html("<div class='k-messagebox k-messagebox-success'>Hooray! Your tickets has been booked!</div>");
                } else {
                    validationSummary.html("<div class='k-messagebox k-messagebox-error'>Oops! There is invalid data in the form.</div>");
                }
            });
        });
    </script>

See Also

In this article
Not finding the help you need? Improve this article