required data annotation throwing error instead of validating client side

Question

I am trying to use a 'required' data annotation so a user is required to fill in a field client-side. Although if the user leaves the field blank and submits the form it throws an error, instead of telling the user client side that 'a start time is required'.

Error:

My data annotations:

[Required(ErrorMessage = "A start time is required")]
public string StartTime { get; set; }
[Required(ErrorMessage = "An end time is required")]
public string EndTime { get; set; }

Controllers for my form:

    [HttpGet]
    public ActionResult BookingForm(School model)
    {
        School school = db.Schools.First(m => m.RollNumber == 
        model.RollNumber);
        return View(school);
    }

    [HttpPost]
    [ActionName("BookingForm")]
    public ActionResult BookingFormPost(Booking model)
    {
        db.Bookings.Add(model);
        db.SaveChanges();
        return RedirectToAction("Index");
    }

View:

<form asp-controller="School" asp-action="BookingForm" method="post">

<br />

<p>Please complete the following information</p>
<div>
    <label for="RollNumber">School Roll Number:</label>
    <br />
    <input asp-for="Booking.Rollnumber" id="txtRoll" name="RollNumber" 
value="@Model.RollNumber" />
</div>
<br />
<div>
    <label for="Date">Choose Camp Date:</label>
    <br />
    <input asp-for="Booking.Date" id="txtDate" name="Date" 
value="@Model.Date.Value.ToShortDateString()" />
</div>
<br />
<div>
    <label for="OfficialSchoolName">School Name:</label>
    <br />
    <input asp-for="Booking.OfficialSchoolName" id="txtOfficialSchoolName" 
name="OfficialSchoolName" value="@Model.OfficialSchoolName" />
</div>
<br />
<div>
    <label for="Address">School Address:</label>
    <br />
    <input asp-for="Booking.Address1" id="txtAddress1" name="Address1" 
value="@Model.Address1" />
    <br />
    <input asp-for="Booking.Address2" id="txtAddress2" name="Address2" 
value="@Model.Address2" />
    <br />
    <input asp-for="Booking.Address3" id="txtAddress3" name="Address3" 
value="@Model.Address3" />
    <br />
    <input asp-for="Booking.Address4" id="txtAddress4" name="Address4" 
value="@Model.Address4" />
</div>
<br />
<div>
    <label for="Times">Times Needed:</label>
    <br />
    <input asp-for="Booking.StartTime" id="txtStartTime" name="StartTime" 
value="Start Time e.g. 10:30" />
    <input asp-for="Booking.EndTime" id="txtEndTime" name="EndTime" 
value="End Time e.g. 16:00" />
</div>
<br />
<div>
    <label for="ClassGroups">Class Groups:</label>
    <br />
    <input asp-for="Booking.ClassGroups" id="txtClassGroups" 
name="ClassGroups" value="e.g. 4th class, 6th class, 1st year etc." />
</div>
<br />
<div>
    <label for="Topics">Topics to be covered:</label>
    <br />
    <input asp-for="Booking.Topics" id="txtTopics" name="Topics" value="" />
</div>
<br />
<div>
    <label for="TeacherName">Teacher Name:</label>
    <br />
    <input asp-for="Booking.TeacherName" id="txtTeacherName" 
name="TeacherName" />
</div>
<br />
<div>
    <label for="Email">Teacher Email:</label>
    <br />
    <input asp-for="Booking.Email" id="txtEmail" name="Email" />
</div>
<br />
<div>
    <label for="PhoneNumber">Teacher Contact Number:</label>
    <br />
    <input asp-for="Booking.PhoneNumber" " id="txtPhoneNumber" 
name="PhoneNumber" value="@Model.PhoneNumber" />
</div>
<br />
<div>
    <label for="Surveys">Would you like to take part in research surveys? 
</label>
    <br />
    <input asp-for="Booking.Surveys" id="Surveys" name="Surveys" 
type="checkbox" checked />
</div>
<br />
<input type="submit" value="Submit" class="submit" />
</form>

Can anyone tell me why client-side validation is not happening? and why I am getting an error instead?

Cheers

edit:

I have tried the following controller changes

    [HttpGet]
    public ActionResult BookingForm(School model)
    {
        School school = db.Schools.First(m => m.RollNumber == 
        model.RollNumber);
        return View(school);
    }

    [HttpPost]
    [ActionName("BookingForm")]
    public ActionResult BookingFormPost(Booking model)
    {
        if (ModelState.IsValid)
        {
            db.Bookings.Add(model);
            db.SaveChanges();
            return RedirectToAction("Index","Home");
        }

        return View(model);
    }

I then get the following browser message when I submit the form:

Server Error in '/' Application. The model item passed into the dictionary is of type 'CampBookingSys.Models.Booking', but this dictionary requires a model item of type 'CampBookingSys.Models.School'.

Answer 1

On your Controller actions that receive the Model with the data annotation on its properties you should have something along the lines of

public IActionResult Get(Obj blah)
{
    if (ModelState.IsValid) 
    { 

       ...
       return View("WhateverPageIsAfterSuccess")
    }


    return RedirectToAction("IndexAction")
}