Remote dataannotation not triggering in front-end with kendo controls - kendo-ui

Question

I have two controls Speed and Speed unit. Speed is a numeric textbox and Speed unit is a dropdown.
The speed field is required if speed unit is filled in and visa versa.
To achieve this validation I'm using the remote data annotation. However in the front-end the validation is not triggering.
My viewmodel:
[AbpDisplayName(OE_TenantConsts.LocalizationSourceName, "idb_Incident.Speed")]
[Range(0.0, double.MaxValue, ErrorMessage = "Please enter a value of {1} or more")]
[Remote(action: "VerifySpeedAndUnit", controller: "Event", AdditionalFields = nameof(SpeedUnitId))]
public decimal? Speed { get; set; }
[AbpDisplayName(OE_TenantConsts.LocalizationSourceName, "idb_Incident.SpeedUnitId")]
[Remote(action: "VerifySpeedAndUnit", controller: "Event", AdditionalFields = nameof(Speed))]
public int? SpeedUnitId { get; set; }
My controller (event controller -> VerifySpeedAndUnit):
[AcceptVerbs("GET", "POST")]
[AllowAnonymous]
public IActionResult VerifySpeedAndUnit(decimal? speed, int? speedUnitId)
{
if ((speed.HasValue && speedUnitId == DropdownConstants.DefaultSelectedSpeedUnitId) || (speed.HasValue && speedUnitId == null))
{
return Json("When entering a speed, you need to select the speed scale as well.");
}
if (speedUnitId != DropdownConstants.DefaultSelectedSpeedUnitId && speed.HasValue && speedUnitId != null)
{
return Json("When selecting a speed scale, you need to enter a speed value as well.");
}
return Json(true);
}
My speed kendo control :
<div class="mb-5 col-md-6 idb_Incident_Speed">
#Html.LabelFor(model => model.Speed, htmlAttributes: new { #class = "control-label col-12" })
<div class="col-12">
<kendo-numerictextbox deferred="true" for="Speed"
format="#.##"
min="0"
name="Speed"
decimals="2"
placeholder="Enter Speed at time of Incident">
</kendo-numerictextbox>
#Html.ValidationMessageFor(model => model.Speed, "", new { #class = "text-danger" })
</div>
</div>
If I inspect the html of the form field I can see the properties are being set. But nothing happens:
What am I missing here?

Answer 1

Doesn't seem like this is supported out of the box. You have to write some custom jquery to get it to work:
#using(Html.BeginForm("FormPost","Home",FormMethod.Post,new {id="myForm"}))
{
<div class="mb-5 col-md-6 idb_Incident_Speed">
#Html.LabelFor(model => model.Speed, htmlAttributes: new { #class = "control-label col-12" })
<div class="col-12">
<kendo-numerictextbox deferred="true" for="Speed"
format="#.##"
min="0"
name="Speed"
decimals="2"
placeholder="Enter Speed at time of Incident">
</kendo-numerictextbox>
#Html.ValidationMessageFor(model => model.Speed, "", new { #class = "text-danger" })
</div>
</div>
#(Html.Kendo().Button()
.Name("btn")
.Content("Submit")
.HtmlAttributes(new {type="submit"})
)
}
#Html.Kendo().DeferredScripts()
<script>
$(document).ready( function () {
var validator = $("#myForm").kendoValidator({
rules: {
remote: function (input) {
if (input.val() == "" || !input.attr("data-val-remote-url")) {
return true;
}
if (input.attr("data-val-remote-recieved")) {
input.attr("data-val-remote-recieved", "");
return !(input.attr("data-val-remote"));
}
var url = input.attr("data-val-remote-url");
var postData = {};
postData[input.attr("data-val-remote-additionalfields").split(".")[1]] = input.val();
var validator = this;
var currentInput = input;
input.attr("data-val-remote-requested", true);
$.ajax({
url: url,
type: "POST",
data: JSON.stringify(postData),
dataType: "json",
traditional: true,
contentType: "application/json; charset=utf-8",
success: function (data) {
if (data == true) {
input.attr("data-val-remote", "");
}
else {
input.attr("data-val-remote", data);
}
input.attr("data-val-remote-recieved", true);
validator.validateInput(currentInput);
},
error: function () {
input.attr("data-val-remote-recieved", true);
validator.validateInput(currentInput);
}
});
return true;
}
},
messages: {
remote: function (input) {
return input.attr("data-val-remote");
}
}
}).getKendoValidator();
$("#btn").click(function(e){
e.preventDefault()
if(!validator.validate()){
//submit form
}
})
});
</script>
Special thanks to telerik support for the code sample.