ASP.NET MVC validation message does not display error message

Question

I have looked at my code and endless examples and looked at other questions as well, but nothing I try works for me.

I am trying to validate my view. The field border is red on submit but the error messages are not visible.

Please note that I am using jquery3 and the issue is not NoValidate
This is how my controller looks like:

namespace 2019.Service.Controllers
{
  public class Controller : ApiController
{
    [HttpPost]
    [ResponseType (typeof(PersonResponse))]
    public HttpResponseMessage Post(Person request)
    {
        PersonResponse response = new PersonResponse()
        {
            PersonId = 10000000 + new Random().Next(),
            IsCapped = false,
            Messages = new[] { "Success from WebAPI" },
            IsSuccessful = true,
            IsDuplicate = false
        };

        Console.WriteLine($"Person data received {request.FirstName}");

        return Request.CreateResponse(HttpStatusCode.OK, response);
    }

This is my view:

     @{
     Layout = "~/Views/shared/_Layout.cshtml";
     ViewBag.Title = "Page title";
     }
     @using 2019.Host.Models
     @model PersonViewModel
     @using (Html.BeginForm("Submit", "Person", FormMethod.Post, new { id = 
     "frmsubmit" }))
            {
                @Html.ValidationSummary(true);
                @Html.ValidationMessageFor(model => model.FirstName);
                @Html.AntiForgeryToken();
                <div class="col-md-12">
                    <p>
                        <input type="hidden" value="@Model.TrackingCode"  id="hdnTrackingCode" />

                        My name is @Html.TextBoxFor(model => model.FirstName, new { @placeholder = Html.DisplayNameFor(model => model.FirstName) }) }
            @if (Model.Results != null &&
                Model.Results.IsSuccessful)
            {
                <div class="col-md-12 text-center">
                    <img src="~/Content/Images/Products/new-success.png" height="24px" />
                    @Html.ValueFor(model => model.Results.Message)
                </div>
            }

and this is my model:

using System.Web.Mvc;

namespace 2019.Host.Models
{
public class PersonViewModel
{
    public PersonViewModel()
    {
        Results = new ResultViewModel();
    }

    public string TrackingCode { get; }

    [Required(ErrorMessage = "FirstName is required")]
    [Display(Name = "First Name")]
    public string FirstName { get; set; }

I have the following scripts in my view :

@section Scripts{
<script src='@Url.Content("~/Scripts/jquery-3.3.1.js")' type='text/javascript'></script>
<script src='@Url.Content("~/Scripts/jquery.validate.js")' type='text/javascript'></script>
<script src='@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")' type='text/javascript'></script>
}

And here is my web.config:

<appSettings> 
    <add key="webpages:Version" value="3.0.0.0" /> 
    <add key="webpages:Enabled" value="false" /> 
    <add key="ClientValidationEnabled" value="true" /> 
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />  
</appSettings>

See highlighted the code generated by @Html.ValidationSummary(true);: