Unobtrusive validation message for required row selection appears at top of table

jkshay

I've implemented a datatable (called activityList) representing activity membership. In my form, the user is required to select a row. In my MVC ASP model, I have

        [Required]
        [DisplayName("selected activity")]
        public string SelectedActivityId { get; set; }

In my form, I have a hidden input for SelectedActivityId, and a related validation message:

                    @Html.HiddenFor(model => model.SelectedActivityId, new { @id = "SelectedActivityId" })
                    @Html.ValidationMessageFor(model => model.SelectedActivityId, null, new { @class = "form-valid" })

I'm handling the storage of the hidden value via javascript:

        $("#activityList tbody").on("click", "tr", function () {
            $(".ag_activity").removeClass("selected");
            $(this).toggleClass("selected");
            $("#SelectedActivityId").val($(this).attr("id"))
        });

My issue is that the validation message appears adjacent to the first row in the table (or the table header), covering data table values. I'd like for the message to appear below the table. Is this possible?

allan

What is it that is actually displaying the error message? It sounds like it might be the ASP modal that is placing the text on page - is that correct? If so, that isn't something that is covered by the DataTables Javascript library. You'd need to update the ASP code.

Allan