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.
Table of Contents
Validation Tag Helpers
The ASP.NET Core provides two Tag Helpers to display the Validation message on the client side.
- Validation Message Tag Helper
- 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
1 2 3 4 | [Required] Public string name {get;set;} |
1 2 3 4 5 6 | <label asp-for="Name">Name</label> <input asp-for="Name" /> <span asp-validation-for="Name"></span> <br /> |
The following HTML is generated. Note that <span> element is empty and field-validation-valid class is applied to it.
1 2 3 4 5 | <label for="Name">Name</label> <input type="text" data-val="true" data-val-required="The Name field is required." id="Name" name="Name" value="" /> <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span> |
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.
1 2 3 4 5 | <label for="Name">Name</label> <input type="text" class="input-validation-error" data-val="true" data-val-required="The Name field is required." id="Name" name="Name" value="" /> <span class="field-validation-error" data-valmsg-for="Name" data-valmsg-replace="true">The Name field is required.</span> |
Add the following style into the top of the view or include it in your stylesheet.
1 2 3 4 5 | <style> .field-validation-error { color:red } </style> |
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.
1 2 3 | <div asp-validation-summary="All"></div> |
This would generate the following HTML when there are no validation messages to display
1 2 3 4 5 | <div class="validation-summary-valid" data-valmsg-summary="true"> <ul><li style="display:none"></li></ul> </div> |
And generates the following HTML, when there is a model error
1 2 3 4 5 | <div class="validation-summary-errors" data-valmsg-summary="true"> <ul><li>The Name field is required.</li></ul> </div> |
To display the caption
1 2 3 4 5 | <div asp-validation-summary="All"> <span>Please correct the following errors</span> </div> |
And add the following style
1 2 3 | .validation-summary-valid span { display: none; } |
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.
1 2 3 | <div asp-validation-summary="ModelOnly"></div> |
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
1 2 3 | ModelState.AddModelError(string.Empty, "Errors occurred in the Model"); |
The following HTML gets generated when the error occurs,
1 2 3 4 5 | <div class="validation-summary-errors"> <ul><li>Errors occurred in the Model</li></ul> </div> |
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.
1 2 3 4 5 | <style> .validation-summary-errors { color:red } </style> |
You can show the caption to the error messages
1 2 3 4 5 | <div asp-validation-summary="ModelOnly"> <span>Please correct the following errors</span> </div> |
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.
