Adding class to error-span using unobtrusive validation - asp.net-mvc

Question

I'm trying to get the example shown here to work within my project.
My code currently looks like:
<!-- jQuery.validate -->
#Scripts.Render("~/Bundles/jQueryVal")
<script type="text/javascript">
TypeScript.Framework.Helper.GlobalHelper.initClientValidation();
</script>
#Scripts.Render("~/Bundles/jQueryValUnobtrusive")
The two bundles are for jquery.validation.js and jquery.validation.unobtrusive.js as I've already know, that I have to include validation, make my changes, and then include unobtrusive.
Here the TypeScript:
const defaultOptions = {
errorClass: "help-block",
highlight(element) {
const idAttr = `#${$(element).attr("id")}Feedback`;
$(element).closest(".form-group").removeClass("has-success").addClass("has-error");
$(idAttr).removeClass("glyphicon-ok").addClass("glyphicon-remove");
},
unhighlight(element, errorClass, validClass) {
const idAttr = `#${$(element).attr("id")}Feedback`;
$(element).closest(".form-group").removeClass("has-error").addClass("has-success");
$(idAttr).removeClass("glyphicon-remove").addClass("glyphicon-ok");
},
errorElement: "span",
errorPlacement(error, element) {
if (element.length) {
error.insertAfter(element);
} else {
error.insertAfter(element);
}
}
};
$.validator.setDefaults(defaultOptions);
My login-view has two simple inputs for username and password:
#Html.LabelFor(m => m.Request.Username, new {#class = "sr-only"})
#Html.TextBoxFor(m => m.Request.Username, new {#class = "form-control"})
#Html.ValidationMessageFor(m => m.Request.Username)
However, the help-block class never gets assigned to the span.
On error it renders to:
<span class="field-validation-error" data-valmsg-for="Request.Username" data-valmsg-replace="true">
<span id="Request_Username-error" class="">The Username field is required.</span>
</span>
Any ideas?