WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
JavaScript Congress β€’ Nov 25, 2021

Form Validation. The Tested Way

Evyatar Alush

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.

Pause
Mute Enter Fullscreen
#1 about 5 min

Why poor form design and validation cause user frustration

Lack of immediate feedback and confusing validation schemas in paper forms mirror common frustrations in poor web form design.

#2 about 1 min

Introduction to the Vest form validations framework

A validation framework utilizes syntax inspired by testing libraries like Mocha and Jest to manage form states reliably.

#3 about 4 min

Common structural problems with current form validation approaches

Traditional form validation code lacks structure, making it difficult to read, write, refactor, and test effectively.

#4 about 3 min

Evaluating existing form validation library approaches

Functional matchers, schema-based libraries, and UI-coupled frameworks each present distinct trade-offs in state management and code sharing.

#5 about 3 min

Adopting unit testing syntax for form validation structure

Utilizing a unit testing syntax creates a structured, declarative, and readable suite that separates validation from feature code.

#6 about 4 min

Connecting a React form to a Vest validation suite

Writing and linking a basic validation suite to a React component processes input errors dynamically.

#7 about 3 min

Configuring multiple validations and targeting specific input fields

Applying an isolated targeting function restricts validation checks to the currently active field to avoid overwhelming users with consecutive errors.

#8 about 3 min

Implementing visual feedback and submission blocking on invalid forms

Applying conditional class names based on validation results drives visual feedback and disables form submission until all rules pass.

#9 about 2 min

Creating warning validations that allow form submission

Implementing non-blocking validation rules such as password strength checks alert users without explicitly failing the form submission.

#10 about 4 min

Validating asynchronous rules against a mock server

Executing remote checks inside an async function while managing pending UI states determines properties like username availability.

#11 about 3 min

Optimizing asynchronous checks with conditional skipping and memoization

Conditional execution rules and memoization prevent unnecessary server queries while caching previous validation results.

#12 about 2 min

Key features and benefits of the Vest validation framework

Built-in architectural choices enable interdependent field checks, test grouping, and efficient state handling inside a tiny bundle footprint.

#13 about 2 min

Future developments and TypeScript rewrite for Vest version four

Upcoming major framework releases introduce complete TypeScript rewrites alongside improved type safety and stability.

#14 about 2 min

Career transitions and handling debounced asynchronous form validations

Strategies for entering software engineering from a non-traditional background accompany methods for incorporating debounced functions into asynchronous validations.

#15 about 1 min

Extending Vest with custom matchers for reusable validation rules

Defining domain-specific regular expressions as global matchers makes validation logic easily reusable across multiple application forms.

#16 about 3 min

Managing dynamic forms and conditional state cleanup in Vest

Handling dynamically added fields requires array iterations and safe state cleanup routines to clear abandoned input values automatically.

Matching moments

2:41 min

Applying structural best practices for code validation

Oliver Arafat Β· LIVE

4:33 min

Managing complex user inputs with reactive forms

Sani Yusuf Β· WWC 2021

2:40 min

Validating inputs and testing application logic

Simone Sanfratello Β· JS Congress

3:49 min

Implementing component and integration validation in React applications

James Bender Β· LIVE

2:25 min

Generating functional interface forms with runtime validations

Sami Ekblad Sami Ekblad Β· WWC 2024

5:05 min

Building a minimal training simulator with JavaScript and Jest

Mirjam Aulbach Β· WWC 2022

More from JavaScript Congress

The Eternal Sunshine of the Zero Build Pipeline thumbnail
50:10
over 4 years ago

The Eternal Sunshine of the Zero Build Pipeline

Teini - an extremely small webshop leveraging awesome and free tech thumbnail
40:45
over 4 years ago

Teini - an extremely small webshop leveraging awesome and free tech

Christian K

Native Web Apps: Are We There Yet? thumbnail
44:40
over 4 years ago

Native Web Apps: Are We There Yet?

Maxim Salnikov

Modern Web Development with Nuxt3 thumbnail
41:43
over 4 years ago

Modern Web Development with Nuxt3

Alexander Lichter

Making neural networks portable with ONNX thumbnail
54:49
over 4 years ago

Making neural networks portable with ONNX

Ron Dagdag

JavaScript the Grumpy Parts thumbnail
46:08
over 4 years ago

JavaScript the Grumpy Parts

Rob Richardson

Upcoming sessions on this topic

Open session

World Congress 2026 North America

Don’t kill my Vibes - Simple Steps to Stay Secure when Vibe Coding

Isaac Evans

Co-founder & CEO of Semgrep

Isaac Evans
Open session

World Congress 2026 North America

Testing React Backends Like a Pro: Mocking Databases with SQLite

David Morris

Solution Architect

David Morris
Open session

World Congress 2026 North America

Full Stack with Flutter - are we there yet?

Nemanja Stoőić

Senior Flutter Developer

Nemanja Stoőić
Open session

World Congress 2026 North America

Evals Are Infra: Building AI Systems Developers Can Actually Trust

Phoebe Wang

Member of Technical Staff at OpenAI

Phoebe Wang
Open session

World Congress 2026 North America

Your Evals Passed. Your Agent Just Emptied a Database.

Tejas Pravinbhai Patel

IEEE Award-Winning Researcher | Best Keynote Speaker | Sr. Software Engineer at Amazon | AI Systems & Agent Architect

Tejas Pravinbhai Patel
Open session

World Congress 2026 North America

Beyond Vibe Coding: An AI Builder’s Guide to Migrating 10k+ React Components

Shubham Chaurasia

Senior Software Engineer @ Meta

Shubham Chaurasia

Related videos

Build and Deploy a Fullstack App with Open Source Tooling thumbnail
25:53
WWC 2023 β€’ almost 3 years ago

Build and Deploy a Fullstack App with Open Source Tooling

Noam Honig

Vuejs and TypeScript- Working Together like Peanut Butter and Jelly thumbnail
44:31
LIVE β€’ over 5 years ago

Vuejs and TypeScript- Working Together like Peanut Butter and Jelly

Rob Richardson

TDD for Vue.js Developers thumbnail
58:26
LIVE β€’ over 3 years ago

TDD for Vue.js Developers

Markus Oberlehner

Building Interactive Async UI with React 19 and Ariakit thumbnail
25:22
WWC 2025 β€’ 12 months ago

Building Interactive Async UI with React 19 and Ariakit

Aurora Scharff

Watch Tests Go Brrrr! : Getting Started with Cypress in ReactJS thumbnail
53:45
JS Congress β€’ over 4 years ago

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

Anna Mcdougall

Yes, You Need to Unit Test your JavaScript. Here's How. thumbnail
1:00:10
LIVE β€’ about 4 years ago

Yes, You Need to Unit Test your JavaScript. Here's How.

James Bender

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.