Scalable Input Validation With UI/UX

🔧 My Thought Process on Adding Scalable Input Validation to an App Full of Custom Inputs

In a recent frontend project, we had already built and used several custom input components—custom text inputs, dropdowns, checkboxes, etc.—across the app.
But still missing a standard validation.

So when the time came to implement robust and maintainable form validation, things got tricky.

Here’s how I approached it 👇

🔍 Research:

I started by exploring which validation library would be the best fit for our codebase and project size.
Used a mix of AI tools and manual searching to compare options and tradeoffs.

🧩 Schema Structure:

I thought deeply about how to organize the validation schemas checking existing standards in a way that was clear, scalable, and suited to our use case.
Found a good structure, then tweaked it slightly to match our needs.

⚖️ Validation Level Decision:

Should validation happen at the input component level or the form level?

Input-level or form-level???

🤩 Input-level gives real-time feedback.
🤔 But ultimately, submission requires form-level validation (e.g., required fields, conditional logic).
😯 Also, putting validation logic inside each input component would hurt reusability.

👉 So I chose form-level validation.

💡 Custom Wrapper Idea:

I wanted validation to be independent of the input components (since they were already used everywhere).

So I came up with this idea 🤩:
Create a custom wrapper component that handles validation messages.
By wrapping any components, either inputs or any button (to show any validation error) 😲

✅ Flexible to use with any component.
✅ No need to touch the existing inputs and design.

Works for any input types or components—text, dropdown, checkbox, etc.

😉 I also styled the error messages using position: absolute inside the wrapper to avoid layout shifts—a small detail, but it really improves UX.

🧠 Error State Management:

I needed a central system to manage all error states: showing, clearing, validating based on schemas.
So that we don't need to write the same code again and again 🤯

🪝 Custom Hook:

So I figured out a custom validation hook:

✅ Each form has a schema, we pass the schema to the hook while using.
✅ The hook provides validation states and methods.
✅ The hook abstracts error logic and provides errors which we can pass down to wrappers via input names/keys.

On submit, we just call validate()—errors are shown, and the UI stays clean and consistent ✅