I have server exposing REST API and client (React SPA) consuming it. I already do validation of user input on the server, but now I want to add subset of it to client as well (no complicated business validation, just basic checks like min/max input length, pattern matching etc.). I identified three possible approaches to this problem.
1. Duplicate the server input constraints on client side and synchronize them manually. The easiest one to implement, potentionally difficult to maintain.
2. Expose new endpoint on server with all the constraints (allowed lengths/regex patterns), which will client load and store at the first load.
3. Validate input dynamically on server by making AJAX call on change of input. I want to avoid this one, as it could increase traffic a lot.
Thoughts/experiences on this problem?
At my first PHP job we used #2 from list pretty successfully, the only thing that sucked was translating the validation errors back into the UI, but I think that can be improved easily by modern UI frameworks (this was a jQuery app at the time).