Adding class to error-span using unobtrusive validation

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?