Validating 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);
}
More ASP.NET Core Form Resources
[ASP.NET Core Form Documentation]((/aspnet-core/html-helpers/layout/form/overview)
Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)