The server code and the database now validate any data that is saved. The user can’t see this yet. This can be frustrating since records are not saved when the ModelState.IsValid is false. The user could get stuck in the edit page and not know why the Save button is failing. To solve this, we need to apply validation controls and client-side JavaScript to the edit page.

Basic validation messages are displayed in a <span> tag using the tag helper asp-validation-for. This will show a default message if any of the model annotations are violated. If you specified a custom ErrorMessage in your annotation, that displays instead. Here is a sample:

<div style="flex:1 0 auto;width:auto">
  <input asp-for="Continent.ID" class="form-control" />
  <span asp-validation-for="Continent.ID" class="text-danger"></span>
</div>

Some client-side scripts are needed to handle the validation logic in the browser. These are provided by ASP.NET but must be added to each page that needs them. This is done in a @section which matches the @RenderSection in the Pages/Shared/_Layout.cshtml file.

For example, this @section is named OtherScripts and it would render some partial named _UsefulScriptsPartial:

@section OtherScripts {
  @{ await Html.RenderPartialAsync("_UsefulScriptsPartial"); }
}

This might have a matching section in _Layout.cshtml like:

@RenderSection("OtherScripts", required: false)

In the Bootstrap CSS:

• text-danger - make the message red