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

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?