In this episode, we tackle the important issue of displaying validation errors to users so they know exactly what went wrong when they try to log in or sign up. We start off by focusing on the login page and walk through how to catch validation errors returned by the API. We wrap our login request in a try/catch, explore the details of the error object, and extract the useful info we need.
Then, we store the errors in a reactive ref, making it easy to show them in our template. To keep things nicely structured (and to help with TypeScript), we define an interface for our validation errors so we always know what we’re dealing with.
Once our structure is set up, we update the template to display the first error message next to each form field. After verifying that this is working on the login page, we rinse and repeat: it’s super easy to drop this logic into another page (like the sign-up page), so you’ll see just how reusable this pattern is.
By the end of this episode, we have a robust setup for catching and showing validation messages, ready to use on any form throughout the app!