In the last post I explored the functionality of the ASP.NET Core MVC input tag helper. This included the ability for the input tag helper to add client side validation attributes to input elements based on data annotation attributes on your model classes. What I didn’t discuss is how we can display those validation messages. That’s where the validation tag helpers come in.

There are 2 validation tag helpers: the Validation Message tag helper and the Validation Summary tag helper.

Validation Message Tag Helper

The validation message tag helper is used to display a validation message for a specific property of your model class. To use it, simply add the asp-validation-for attribute to a span element.

<span asp-validation-for="Email"></span>

This will generate a span containing validation messages for the specified property. For example, if the email property is required and the user did not specify it, the email tag helper would generate the following HTML:

<span class="field-validation-error" 
         data-valmsg-replace="true" 
         data-valmsg-for="Email"> 
   The Email field is required.</span>

The tag helper found a model validation message for the Email property and placed it inside the span. It also added some data-val attributes so jQuery Validation knows where to place client side validation messages for the Email property.

Typically, we would place a validation message tag helper directly after the input tag helper for the same property. This allows for the validation message to be displayed in close proximity to the input that it applies to.

Note, this tag helper is an alternative to the _@Html.ValidationMessageFor(m => m.Email)_ html helper method.

Merging HTML Attributes

Like all tag helpers, the validation message tag helper will merge the attributes it adds with any other attributes you add to the span. For example, we can add our own class=”text-danger” to the span:

<span asp-validation-for="Email"
         class="text-danger"></span>

which would generate the following HTML:

<span class="text-danger field-validation-error" 
         data-valmsg-replace="true" 
         data-valmsg-for="Email"> 
   The Email field is required.</span>

Validation Summary Tag Helper

While the validation message tag helper is used to display validation messages that apply to a single property of your model, the validation summary tag helper is used to display validation messages that apply to your entire mode. You can optionally specify to include all property level validation messages in the summary or only display the messages that apply at the model level.

To use this tag helper, by add the asp-validation-summary attribute to a div element. The value of the attribute can be ValidationSummary.All, ValidationSummary.ModelOnly or ValidationSummary.None.

ValidationSummary.All will display both property and model level validations messages while ValidationSummary.ModelOnly will display only validation messages that apply to the model level. If ValidationSummary.None is specified, the tag helper will do nothing, which seems like a very strange thing to do. Instead of None, I would recommend you just not add the asp-validation-summary attribute in the first place.

<div asp-validation-summary="All"></div>

This would generate the following HTML when there are no validation messages to display:

<div class="validation-summary-valid" data-valmsg-summary="true">
  <ul>
    <li style="display: none;"></li>
  </ul>
</div>

If the model has errors, it would generate something like this:

<div class="validation-summary-errors" data-valmsg-summary="true">
  <ul>
    <li>The Email field is required.</li>
    <li>The Password field is required.</li>
  </ul>
</div>

HTML attribute merging works too. You can add attributes to the div and they will be included in the generated HTML.

Note, this is an alternative to the `@Html.ValidationSummary(true)` html helper method.

Conclusion

That should cover everything you need to know about the validation tag helpers. They really are very simple to use.

In the next post, we will explore another simple tag helper: the Label tag helper.