Evyatar Alush

Form Validation. The Tested Way

What if your form validation logic was as clear and testable as your unit tests? Discover a declarative, framework-agnostic library that makes it possible.

Form Validation. The Tested Way
#1about 5 minutes

Why user experience with forms is often broken

A personal story about a frustrating tax form highlights common UX failures like unclear requirements and delayed feedback.

#2about 6 minutes

Analyzing common form validation patterns and their pitfalls

Existing validation solutions often lack structure, are hard to test, and create tight coupling with UI frameworks.

#3about 2 minutes

Adopting a unit testing syntax for declarative validations

Vest is inspired by unit testing libraries like Mocha and Jest to create declarative, readable, and separate validation suites.

#4about 5 minutes

Live coding: Setting up a basic validation suite in React

Learn how to create a validation suite with Vest, connect it to a React form, and display error messages for individual fields.

#5about 5 minutes

Refining validation UX with field isolation and warnings

Use Vest's `only` function to validate a single field on interaction and implement non-blocking warnings for optional suggestions.

#6about 7 minutes

Implementing complex asynchronous and memoized validations

Manage asynchronous server-side checks, skip them conditionally with `skipWhen`, and prevent redundant calls using memoization.

#7about 2 minutes

A summary of Vest's features and future roadmap

Vest is a tiny, stateful library that offers declarative, framework-agnostic validations, with a full TypeScript rewrite in version 4.

#8about 5 minutes

Q&A: Handling dynamic forms and global validation rules

Learn how to handle debounced async calls, define global rules by extending `enforce`, and manage dynamic forms with `test.each` or manual cleanup.

Related jobs
Jobs that call for the skills explored in this talk.

Matching moments

Building accessible forms and announcing dynamic updates
17:17 MIN

Building accessible forms and announcing dynamic updates

Making Interactions Accessible to All Users

Improving the user experience with JavaScript form submissions
07:36 MIN

Improving the user experience with JavaScript form submissions

Full Spectrum File Uploads

Audience Q&A on patterns, typescript, and frameworks
25:14 MIN

Audience Q&A on patterns, typescript, and frameworks

10 must-know design patterns for JS Devs

How to build accessible forms and validation
23:23 MIN

How to build accessible forms and validation

Going on a CODE100 Accessibility Scavenger Hunt

Achieving type-safe input validation with Zod
20:22 MIN

Achieving type-safe input validation with Zod

Don't compromise on speedy delivery nor type-safety by choosing TypeScript

Implementing write-once validation for frontend and backend
16:20 MIN

Implementing write-once validation for frontend and backend

Meet Your New BFF: Backend to Frontend without the Duct Tape

Introduction to JavaScript design patterns
00:03 MIN

Introduction to JavaScript design patterns

10 must-know design patterns for JS Devs

Why HTML is inherently more resilient than JavaScript
00:52 MIN

Why HTML is inherently more resilient than JavaScript

The Resilience of the World Wide Web

Featured Partners

Related Videos

See all videos
What the heck do "declarative" and "reactive" actually mean?30:40

What the heck do "declarative" and "reactive" actually mean?

André Kovac

Web development best practices in 202151:10

Web development best practices in 2021

Laurie Voss

Lies we Tell Ourselves As Developers31:13

Lies we Tell Ourselves As Developers

Stefan Baumgartner

Typescript, React and Atomic Design - a match made in heaven40:05

Typescript, React and Atomic Design - a match made in heaven

Nathalia Rus

10 must-know design patterns for JS Devs28:13

10 must-know design patterns for JS Devs

Erick Wendel

Web development: where are we, and where are we going?32:56

Web development: where are we, and where are we going?

Laurie Voss

Watch Tests Go Brrrr! : Getting Started with Cypress in ReactJS53:45

Watch Tests Go Brrrr! : Getting Started with Cypress in ReactJS

Anna McDougall

Why I Recommend Svelte to Every New Web Developer31:21

Why I Recommend Svelte to Every New Web Developer

Markus Hatvan

From learning to earning

Jobs that call for the skills explored in this talk.