Validation and Views

While our application is properly handing errors, we need to display the error messages so that the users know what information they should be adding. Client-side validation like this can prevent faulty data submissions.

Displaying Error Messages in our View

Create a separate span element in the form. In the <span> tag, we can add asp-validation-for to specify which property’s validation error messages should be displayed if the conditions are not met.

Now when we run our application and enter a bad event name or forget our description, we get the error message displaying what we should be entering!

If we pass our validation, we should be redirected to the /Events view and see the new event added to the list!

Changing the Color of Error Messages

Making error messages a different color, such as red, is a common technique to catch the attention of the user. We can do that by using unobtrusive validation methods, such as using a third-party library.

The jQuery Unobtrusive Validation library. contains scripts that will perform validation tasks, such as updating the color of error messages. To utilize this library, we need to point to it in our _Layout.cshtml page and then add more attributes to our Views.

_Layout.cshtml Updates

To utilize the library, we need to add the following references to it within the <main> area.

1
2
3
4
5
6

<main>
   @RenderBody()
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.12/jquery.validate.unobtrusive.js"></script>
</main>

In the Add View, you will need to create more class attributes for the library to target.

 8
 9
10
11
12

 <div asp-controller="Events" asp-action="Add" class="form-group">
     <label asp-for="Name"></label>
     <input asp-for="Name" class="form-control"/>
     <span asp-validation-for="Name" class="text-danger"></span>
 </div>

Note in line 10 the addition of class="form-control" and in line 11 class="text-danger". These attributes will be noted by the jQuery Unobtrusive Validation library and print out red if the client does not meet the requirements.

You can read more about client-side validation and the jQuery Unobtrusive Validation library check out the documentation .

Check Your Understanding