User Input Validation
Pages written using the Razor syntax can take advantage of both client-side and server-side validation. This validation is actually provided by the jQuery.validate.js plug-in (script files) included with the default project template. Recall that the model already includes field-level validation rules using data annotations. These rules will be applied to the client code by ASP.NET when binding the model fields to the view. Of course, these same rules will process on the server, too.
The HTML helper methods and TagHelpers can be used to define validation; they require the jquery.validate plug-in to be added to the view. Recall that the shared _Layout.cshmtl page defined a section called scripts for adding script files to the page. You can use that section to add these validation scripts. Note that if you intend to use these on all the pages in your site, you might add them directly to the layout page.
The following shows the markup required to add the two validation scripts to a single view page.
@section Scripts {
<script src="@Url.Content("~/lib/jquery-validation/jquery.validate.js")">
</script>
<script src="@Url.Content(
"~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js")">
</script>
}
The ASP.NET 5 template includes a file that makes adding these scripts to a view even easier. This file is in the Views/Shared directory; it is called _ValidationScriptsPartial.cshtml. This file makes use of the <environment/> TagHelpers to deploy a version of these scripts that can be debugged during development and minified (think optimized) versions for staging and production. These scripts can be included in your view page using Html.RenderPartialAsync as follows:
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
}
The next step is to reserve a spot within the view for any validation message. To do so, you can use the @Html.ValidationMessageFor HTML helper. The following shows an example of creating a validation message for the model’s Email property:
@Html.ValidationMessageFor(model => model.Email, "",
new { @class = "text-danger" })
You can also use a TagHelper to add validation for a field. The validation information above would be written as follows using a TagHelper:
<span asp-validation-for="Email" class="text-danger"></span>
In addition to the message that is added to each field, we can add an overall summary message to the page using the @Html.ValidationSummary helper method. This will also allow you to show a message to the user should the form post to the server and result in errors that were not trapped on the client. The following shows an example of this Razor call.
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
This summary can also be written using a TagHelper. The following shows an example.
<div asp-validation-summary="ValidationSummary.All" class="text-danger"></div>