Asp.net MVC 5 ModelValidation is not working

Question

So I have a ViewModel and the properties are all validated by having required attributes on them. When I submit the form it doesn't throw any error messages, i.e. name field is required.

I think I have figured where the problem is. Its in the submit button, how do I get the button to hit the HttpPost method of the ActionList because at the moment its not hitting that, hence the modelstate is not being validated.

View:

<h2>@ViewBag.Title</h2>
<hr>
<div class="well">
    @using (Html.BeginForm("BookingDetails", "Booking"))
    {
        @Html.ValidationSummary(true)
        <div class="form-group">
            @Html.DisplayNameFor(m => m.FirstName)
            @Html.TextBoxFor(m => m.FirstName, new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.FirstName)
        </div>

        <div class="form-group">
            @Html.DisplayNameFor(m => m.Surname)
            @Html.TextBoxFor(m => m.Surname, new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.Surname)
        </div>
        <div class="form-group">
            @Html.DisplayNameFor(m => m.EmailAddress)
            @Html.TextBoxFor(m => m.EmailAddress, new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.EmailAddress)
        </div>
        <div class="form-group">
            @Html.DisplayNameFor(m => m.MobileNumber)
            @Html.TextBoxFor(m => m.MobileNumber, new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.MobileNumber)
        </div>
        <div class="form-group">
            @Html.DisplayNameFor(m => m.NumberOfPeople)
            @Html.TextBoxFor(m => m.NumberOfPeople, new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.NumberOfPeople)
        </div>
        <div class="form-group">
            @Html.DisplayNameFor(m => m.Date)
            @Html.TextBoxFor(m => m.Date, new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.Date)
        </div>
        <div>
            @Html.DisplayNameFor(m => m.Time)
            @Html.TextBoxFor(m => m.Time, new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.Time)
        </div>
    }
    </div>
        <div class="form-group">
            @Html.ActionLink("Book my table", "BookingDetails", "Booking" new { @class ="btn btn-primary" })
        </div>

Controller:

    // GET:
    public ActionResult BookingDetails()
    {
        return View();
    }

    // Post
    [HttpPost]
    public ActionResult BookingDetails(BookingDetailsViewModel model)
    {
        if(ModelState.IsValid)
        {
            return RedirectToAction("BookingConfirmation");
        }

        return View(model);
    }

Answer 1

You have two problems that I can see.

Firstly, your button isn't a submit button. Its a link that sits outside of the form. You must move it into your form and make it a submit button (or write some javascript that submits the form on click):

    <div>
        @Html.DisplayNameFor(m => m.Time)
        @Html.TextBoxFor(m => m.Time, new { @class = "form-control" })
        @Html.ValidationMessageFor(m => m.Time)
    </div>

    <input type="submit" class="btn btn-primary" /> <!-- move it inside the form -->
    @*           ^^^^ submit    *@
} <!-- end of your form is here -->

Also, Html.ValidationSummary(true) will hide all of your property errors from your Validation Summary. This may not be what you want. If you run into that issue.. remove true from the call.