Post
Ask Question

Validation Tag Helpers In ASP.NET Core MVC

Introduction
 
This article explains about the validation tag helpers of ASP.NET Core MVC. There are two validation tag helpers available.
  • Validation Message Tag Helper: It displays the validation message for a single property of a Model.
  • Validation Summary Tag Helper: It displays a summary of validation messages for all the properties of a Model.
The input tag helper adds a client-side validation to the input elements based on the data annotation defined in our Model class. The validation tag helper displays the error messages for invalid inputs.
 
Validation Message Tag Helper (asp-validation-for)
 
It displays the error message for a single property of our Model. It can be achieved by asp-validation-for tag helper. It adds the data-valmsg-for="property name" attribute to the element which it carries for example span. It attaches the validation message on the input field of the specified Model property. The client-side validation can be done with jQuery. It is an alternative to Html.ValidationMessageFor.
 
Model
  1. namespace ValidationTagHelper.Models  
  2. {  
  3.     using System.ComponentModel.DataAnnotations;  
  4.     public class UserViewModel  
  5.     {  
  6.         public int Id { get; set; }  
  7.         [StringLength(200)]  
  8.         [Required]  
  9.         public string Name { get; set; }  
  10.         [EmailAddress]  
  11.         [Required]  
  12.         public string Email { get; set; }  
  13.     }  
  14. }  
View (Views\Home\Index.cshtml)
  1. <div class="row">  
  2.     <form asp-controller="Home" asp-action="Save" method="post">  
  3.         Email Address: <input asp-for="Email" /><br />  
  4.         <span asp-validation-for="Email"></span>  
  5.     </form>  
  6. </div>  
Generated HTML

 
 
The Validation message tag helper is generally used after an input tag helper for the same property to display any validation message.
We must include the jquery.validate and jquery.validate.unobtrusive files for performing client-side validation. When an error in our model validation framework occurs, the jQuery places the error message to the body of the span.
 
 
 
Validation Summary Tag Helper (asp-validation-summary)
 
It displays a summary of validation error messages. It targets "DIV" element with "asp-validation-summary" attribute. It is similar to @Html.ValidationSummary. The attribute "asp-validation-summary” can have one of the following values.
  • ValidationSummary.All: It displays both, the property and model level validations.
  • ValidationSummary.ModelOnly: it displays Model-level validation only.
  • ValidationSummary.None: It does not perform any validation. It is equivalent to that the tag is not applied.
Example

To demonstrate the example, I have used the same Model as in the previous example. Following is my Controller and View code.
  1. public IActionResult Index1()  
  2. {  
  3.     return View();  
  4. }  
  5. [HttpPost]  
  6. public object Save(UserViewModel user)  
  7. {  
  8.     if (!ModelState.IsValid)  
  9.     {  
  10.         //Model has Error(s)  
  11.         return View("index1", user);  
  12.     }  
  13.     return null;  
  14. }  
View
  1. @model ValidationTagHelper.Models.UserViewModel  
  2. <div class="row">  
  3.     <form asp-controller="Home" asp-action="Save" method="post">  
  4.         <div asp-validation-summary="All"></div>  
  5.         <br />  
  6.   
  7.         Name: <input asp-for="Name" /><br />  
  8.         Email Address: <input asp-for="Email" /><br />  
  9.         <br />  
  10.         <button type="submit">Test Validation</button>  
  11.     </form>  
  12. </div>  
Generate HTML when Model is valid

 
 
Generated HTML when Model has error

 
 
Summary
 
The validation tag helpers are very easy to use. They are very similar to the previous versions of ASP.NET MVC tag helpers.


Similar Articles