<div class="d-1of2 t-1of2 m-all">
                    @Html.LabelFor(m => m.FirstName)
                    @Html.MaxLengthTextBoxFor(m => m.FirstName, new { @class = "alphaonly" })
                    @Html.ValidationMessageFor(m => m.FirstName)
                </div>

[Required]
    [Display(Name = "First Name")]
    [StringLength(100)]
    public string FirstName { get; set; }

<div class="d-1of2 t-1of2 m-all">
    <label for="FirstName">First Name</label>
    <input class="alphaonly" data-val="true" data-val-length="The field First Name must be a string with a maximum length of 100." data-val-length-max="100" data-val-required="The First Name field is required." id="FirstName" maxlength="100" name="FirstName" type="text" value="" />
    <span class="field-validation-valid" data-valmsg-for="FirstName" data-valmsg-replace="true"></span>
</div>

function onError(error, inputElement) {  // 'this' is the form element
    var container = $(this).find("[data-valmsg-for='" + escapeAttributeValue(inputElement[0].name) + "']"),
        replaceAttrValue = container.attr("data-valmsg-replace"),
        replace = replaceAttrValue ? $.parseJSON(replaceAttrValue) !== false : null;

    container.removeClass("field-validation-valid").addClass("field-validation-error");
    error.data("unobtrusiveContainer", container);

    if (replace) {
        container.empty();
        error.removeClass("input-validation-error").appendTo(container);
    }
    else {
        error.hide();
    }
}