In this episode, we jump into the world of real-time validation for form fields, focusing specifically on our title and author inputs. While these fields don't necessarily have strict requirements, we add a minimum length rule just to see real-time validation in action.
First, we see what happens if we try to validate as we type by using the live
setting. This instantly shows validation errors with every character entered, but we quickly realize it's not the best user experience (or network usage), since it sends a request on every keystroke.
Next, we try the blur
modifier for validation—this means the input is only checked once we move away from it (like clicking to the next field). This feels a lot smoother for users, since they're not bombarded with messages while they're still typing. Plus, it's more efficient!
We set up the minimum character rule, try out both validation approaches, and walk through submitting a valid entry. By the end, you'll have a solid grasp on the difference between real-time validation via live
and the more commonly used blur
, and you'll know how and when to choose each one for your forms.