richardhulbert
1 week ago
371
4
Vue

Clearing validation errors Unifying client and server validation rules?

Posted 1 week ago by richardhulbert

Having enjoyed the laracast series by @jefferyway on vue forms I have been playing around with approaches to clearing the validation errors. But I have a use case that I wonder if folks to help with.

I really like the idea of having validation in one place (preferably the server). In Jeffery's tutorial errors are stored in an error class that is part of an abstracted form class. To clear an error on a field we look for keydown events on a field in the form and clear the error for that field. It all works fine except consider this:

We have a field 'name', it has two validation rules: required and min length:4, these are set in the controller or a request subclass on the server. When a user submits with the 'name' field empty it responds with status 422 and we can show the error.

Now here is the rub. As the user types the error disappears, what we really want is the next error to appear (min length) until the user types the 4th character. With client side javascript that is simple BUT it means having two sets of rules.

So do we have separate client and server rules or find a way of the server returning the rules to the client to parse as part of the error response ?

Any thoughts?

Please sign in or create an account to participate in this conversation.