Validation Tag Helpers in ASP.NET Core

The ASP.NET provides validation related tag helpers which display the validation messages to the user. We learned how server-side model validation works in the previous tutorial. The Model binder binds and validates the data received over the HTTP Request. It then creates the ModelState object, which contains the validation messages generated by the Model Binder. The Validation Tag helpers generate the HTML element to display these messages in the view.

Validation Tag Helpers

The ASP.NET Core provides two Tag Helpers to display the Validation message on the client side.

  1. Validation Message Tag Helper
  2. Validation Summary Tag Helper

Validation Message Tag Helper

The validation message tag helper targets the <span> element and is used to display a validation message for the property specified in its attribute.

For Example

The following HTML is generated. Note that <span> element is empty and field-validation-valid class is applied to it.

And when you submit the form with an empty name field. The following HTML is generated. Note that the <span> element now contains the error message and field-validation-error class is applied to it.

Add the following style into the top of the view or include it in your stylesheet.

You should be able to see the validation message is displayed in the red colour.

Validation Summary Tag Helper

The validation summary tag helper targets the HTML <div> element and is used to display the all of forms validation error messages at one place. Each error message is displayed in an unordered list.

The asp-validation-summary tag helper is placed at the top of the form so as to display the error message.

You need to specify three values to asp-validation-summary tag helper. All, ModelOnly or None.

All

This Option displays all the validation errors.

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

And generates the following HTML, when there is a model error

To display the caption 

And add the following style

ModelOnly

This Option displays the Model level validation error. The Property Model errors are not displayed. Use this option if you are displaying the property validation error using the asp-validation-for tag helper.

Strangely this does not generate any HTML, when the ModelState is Valid, unlike the option All.

You can add the Model level error directly in the Model using

The following HTML gets generated when the error occurs,

None

The Tag Helpers will not display any error message, This is the same as not adding the Tag Helper.

Note that validation-summary-valid class is added when the model is valid (not when “All” Option is selected) and it is replaced by validation-summary-errors when the model is invalid.

Adding the following style changes the error message text colour to red.

You can show the caption to the error messages

The caption is displayed only when the error is displayed.

Summary

In this article, we looked at How to use Validation tag helpers to display the validation messages to the user.

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top