Join Jess Chadwick for an in-depth discussion in this video Displaying validation errors, part of ASP.NET Core: Razor Pages.
- [Instructor] The last thing I did to this form was to implement server side data validation that rejected a user's request, and to show them the edit page again when they attempted to submit invalid data. This works great. If I'm the owner of this site and its data, since those invalid values have been kept out of my database; however, if I'm the user of this page, expecting my changes to be saved, but instead just seeing the edit page again with no indication of what went wrong, other than these red boxes, this behavior is just confusing, and I'm left wondering what I did wrong.
So to help our users out, let's show them some error messages to let them know when they've done something wrong, and to do so, I'm going to use two new tag helpers to display those error messages in the proper places, so that users will have the information they need in order to fix their mistakes. The first tag helper I'll show is the asp-validation-summary helper. This one is the most helpful of the two because it renders all the validation errors in one list so that users can see everything they need to fix in one place.
And it's pretty easy to use. Just apply it to a div tag or a p tag or any other content tag. Be sure to set the value to all to display all errors. Now with this in place, I can try and enter some invalid data and see what the error summary looks like. Now that looks pretty good, but now I'll add some more markup to make it look even better with the custom CSS that my designers gave me.
First I'll wrap it in a container that will center it above the form field. Then I'll include a title with an H3 tag to indicate these are validation errors. I'll end it with an HR tag to help separate it from the rest of the page. Finally, I'll wrap the whole thing in a conditional statement, only showing it if the modelstate.isvalid property is false, meaning that there are no errors to be displayed.
Luckily this same model state property that is available on the page model is also available in the razor page as well. With this in place, I can see my nicely formatted validation summary. Depending on the experience you'd like to provide, you can also render each of the error messages individually for placement closer to the actual input field that contains the error. To do this, simply add a content tag, for example a span tag that includes the asp-validation-for helper.
Like the asp-for tag helper, this tag helper accepts the path to the property that was validated. In this case, it's recipe.name. I can add this to all the other fields as well. And then I can try the page out to see these errors in action. And once I fix all these issues and try and submit once more, I can see that everything still works great since I'm redirected to the recipe page with my updates in place.
- Creating a new application
- Setting up pages
- Rendering dynamic content
- Reusing markup with layouts
- Increasing the maintainability of pages
- Processing data
- Validating input
- Securing an application