> Markdown version of [/videos/314-form-validation-the-tested-way](https://www.wearedevelopers.com/videos/314-form-validation-the-tested-way). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Form Validation. The Tested Way

Tired of tangled form validation logic? Stop coupling rules to your UI. Discover Vest, a lightweight library that treats form validations like clean test suites.

- **Speakers:** Evyatar Alush
- **Event:** JavaScript Congress
- **Published:** November 25, 2021
- **Duration:** 37:33
- **URL:** https://www.wearedevelopers.com/videos/314-form-validation-the-tested-way

## Summary

Building web forms is notoriously frustrating for both users and developers, often resulting in tangled logic, premature error flags, and validation rules tightly coupled to specific UI frameworks. To solve this, frontend engineer Avatar introduces Vest, a framework-agnostic form validation library inspired by the declarative structure of unit testing tools like Mocha and Jest. By treating validations like test suites, Vest cleanly separates validation rules from feature code, significantly improving state management, readability, and testing.

During a live React demonstration, Vest's testing-style syntax (`test()`, `enforce()`) showcases how to write intuitive rules for user inputs. The framework provides built-in methods to handle common frontend workflow hurdles natively. For instance, the `only()` function restricts validation exclusively to the field currently being edited, eliminating the poor UX of untouched fields spontaneously turning red. Developers can also declare non-blocking warning states for passive feedback—such as password strength suggestions—and manage visual UI updates smoothly using Vest's class name assignment utilities.

Beyond basic inputs, Vest excels at complex, interdependent, and asynchronous validation states. The framework radically simplifies querying an API to check if a username is taken by handling pending states natively without extensive boilerplate. It encompasses powerful performance optimizations natively, including `skipWhen` to prevent expensive network requests if synchronous base criteria fail, and memoization to avoid repeating identical server calls. At under 7kb, Vest provides developers with a structured, highly maintainable, and lightweight approach to keeping form logic untangled from frontend UI components.

**Keywords:** form validation framework, vest framework, unit testing inspired validation, declarative validation syntax, framework-agnostic form validation, async server validation, react form state management, mocha and jest syntax, validation memoization, dynamic form handling, non-blocking form warnings, ui state separation, frontend architecture patterns, interdependent field validation, stateful validation libraries

## Chapters

1. **Why poor form design and validation cause user frustration** (00:03) — Lack of immediate feedback and confusing validation schemas in paper forms mirror common frustrations in poor web form design.
1. **Introduction to the Vest form validations framework** (04:25) — A validation framework utilizes syntax inspired by testing libraries like Mocha and Jest to manage form states reliably.
1. **Common structural problems with current form validation approaches** (05:01) — Traditional form validation code lacks structure, making it difficult to read, write, refactor, and test effectively.
1. **Evaluating existing form validation library approaches** (08:30) — Functional matchers, schema-based libraries, and UI-coupled frameworks each present distinct trade-offs in state management and code sharing.
1. **Adopting unit testing syntax for form validation structure** (11:25) — Utilizing a unit testing syntax creates a structured, declarative, and readable suite that separates validation from feature code.
1. **Connecting a React form to a Vest validation suite** (13:38) — Writing and linking a basic validation suite to a React component processes input errors dynamically.
1. **Configuring multiple validations and targeting specific input fields** (17:08) — Applying an isolated targeting function restricts validation checks to the currently active field to avoid overwhelming users with consecutive errors.
1. **Implementing visual feedback and submission blocking on invalid forms** (19:15) — Applying conditional class names based on validation results drives visual feedback and disables form submission until all rules pass.
1. **Creating warning validations that allow form submission** (21:32) — Implementing non-blocking validation rules such as password strength checks alert users without explicitly failing the form submission.
1. **Validating asynchronous rules against a mock server** (23:23) — Executing remote checks inside an async function while managing pending UI states determines properties like username availability.
1. **Optimizing asynchronous checks with conditional skipping and memoization** (26:50) — Conditional execution rules and memoization prevent unnecessary server queries while caching previous validation results.
1. **Key features and benefits of the Vest validation framework** (29:39) — Built-in architectural choices enable interdependent field checks, test grouping, and efficient state handling inside a tiny bundle footprint.
1. **Future developments and TypeScript rewrite for Vest version four** (31:23) — Upcoming major framework releases introduce complete TypeScript rewrites alongside improved type safety and stability.
1. **Career transitions and handling debounced asynchronous form validations** (32:33) — Strategies for entering software engineering from a non-traditional background accompany methods for incorporating debounced functions into asynchronous validations.
1. **Extending Vest with custom matchers for reusable validation rules** (34:24) — Defining domain-specific regular expressions as global matchers makes validation logic easily reusable across multiple application forms.
1. **Managing dynamic forms and conditional state cleanup in Vest** (35:23) — Handling dynamically added fields requires array iterations and safe state cleanup routines to clear abandoned input values automatically.

## Related Moments

- [Applying structural best practices for code validation](https://www.wearedevelopers.com/videos/34-serverless-past-present-and-future) (from "Serverless: Past, Present and Future")
- [Managing complex user inputs with reactive forms](https://www.wearedevelopers.com/videos/197-angular-features-you-should-be-using) (from "Angular Features You Should be Using")
- [Validating inputs and testing application logic](https://www.wearedevelopers.com/videos/327-do-typescript-without-typescript) (from "Do TypeScript without TypeScript")
- [Implementing component and integration validation in React applications](https://www.wearedevelopers.com/videos/439-yes-you-need-to-unit-test-your-javascript-here-s-how) (from "Yes, You Need to Unit Test your JavaScript. Here's How.")
- [Generating functional interface forms with runtime validations](https://www.wearedevelopers.com/videos/1159-speak-code-deploy-transforming-developer-experience-with-voice-commands) (from "Speak, Code, Deploy: Transforming Developer Experience with Voice Commands")
- [Building a minimal training simulator with JavaScript and Jest](https://www.wearedevelopers.com/videos/446-treat-yourself-a-tale-about-dog-training-and-test-driven-development) (from "Treat yourself - A tale about dog training and test-driven development")

## Related Articles

- [Top 5 React Form Libraries for Developers](https://www.wearedevelopers.com/magazine/399-top-5-react-form-libraries-for-developers)
- [Security Basics for Vibe Coders](https://www.wearedevelopers.com/magazine/598-security-basics-for-vibe-coders)
- [The HTML Elements That You’re Probably Over-Engineering](https://www.wearedevelopers.com/magazine/646-the-html-elements-that-you-re-probably-over-engineering)
- [Tweak CSS Properties Live with slideVars](https://www.wearedevelopers.com/magazine/733-tweak-css-properties-live-with-slidevars)

## Related Jobs

- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**
- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [Staff Frontend Engineer (Expert+/Lead equivalent) - Hybrid working model, 100%, Ho Chi Minh City](https://www.wearedevelopers.com/jobs/48314-staff-frontend-engineer-expert-lead-equivalent-hybrid-working-model-100-ho-chi-minh-city) at **SMG Swiss Marketplace Group**
- [Agile Full Stack Engineer](https://www.wearedevelopers.com/jobs/48325-agile-full-stack-engineer) at **synava GmbH**
- [Working Student Frontend Development](https://www.wearedevelopers.com/jobs/ext/1185791-working-student-frontend-development) at **ZEISS Group**
- [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1304673-software-engineer) at **Bitpanda**