New to Telerik UI for ASP.NET Core? Download free 30-day trial

How can I validate properties decorated with the Compare attribute?

Environment

Product Version 2022.3.913
Product Form for Telerik UI for ASP.NET Core

Description

How can I validate properties decorated with the [Compare] attribute when using the Form? For example:

    public class User
    {
        [Display(Name = "UserName")]
        public string UserName { get; set; }

        [Required]
        [Display(Name = "Password")]
        [DataType(DataType.Password)]
        [StringLength(20, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 8)]
        public string? Password { get; set; };

        [Required]
        [Display(Name = "Confirm Password")]
        [DataType(DataType.Password)]
        [NotMapped]
        [Compare("Password", ErrorMessage = "Passwords did not match.")]
        public string? ConfirmPassword { get; set; }
    }

Solution

You can achieve this by extending the Form's built-in Kendo Validator:

    @(Html.Kendo().Form<User>()
        .Name("myForm")
        .HtmlAttributes(new { action = @Url.Action("MyAction","MyController"), method = "POST" })
        .Validatable(v=>v.ValidateOnBlur(true))
        .Items(items => {
                items.Add().Field(f => f.UserName);
                items.Add().Field(f => f.Password);
                items.Add().Field(f => f.ConfirmPassword);
            })
        )
    <script>
        (function ($, kendo) {
        $.extend(true, kendo.ui.validator, {
            rules: {
                equalto: function (input) {
                    if (input.filter("[data-val-equalto-other]").length) {
                        var otherField = input.attr("data-val-equalto-other");
                        otherField = otherField.substr(otherField.lastIndexOf(".") + 1);

                        return input.val() == $("#" + otherField).val();
                    }
                    return true;
                }
            },
            messages: {
                equalto: function (intput) {
                    return intput.attr("data-val-equalto");
                }
            }
        });
    })(jQuery, kendo);
    </script>
    public IActionResult Index()
    {
        var viewModel = new User();
        return View(viewModel);
    }
In this article