In this episode, we're diving into adding some basic validation to our form. We'll start by setting up a simple validation rule in the controller to make sure the body field is required. Once that's in place, we'll test it out to see how validation errors are handled—checking out what shows up in the network tab and how those errors are sent back to our front end.
Next, we'll look at how to access these errors in our component. First, we see how to pull the errors globally via props, just to get a sense of how the errors surface. Then, we switch to a more convenient method: accessing errors directly from the form instance itself. This makes things much cleaner, especially if you have several forms on one page.
We'll also cover how to display field-specific error messages right below our input fields, highlighting the errors with a class for better visibility. After that, we check what happens when the form is submitted successfully—the errors disappear, but we’ll notice there’s no clear feedback for a successful submission yet.
Finally, we tee up for the next episode, where we'll tackle what to do after a form submission actually works: how to show a success message, clear the form, and anything else to polish off the flow. Stay tuned for that!