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 · World Congress 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:02 min

Combining clean architecture and MVVM in React

Marc Brehmer Marc Brehmer · Europe 2026 Virtual

2:25 min

Generating functional interface forms with runtime validations

Sami Ekblad Sami Ekblad · World Congress 2024

More from JavaScript Congress

The Eternal Sunshine of the Zero Build Pipeline thumbnail
50:10
almost 5 years ago

The Eternal Sunshine of the Zero Build Pipeline

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

Teini - an extremely small webshop leveraging awesome and free tech

Christian K

Native Web Apps: Are We There Yet? thumbnail
44:40
almost 5 years ago

Native Web Apps: Are We There Yet?

Maxim Salnikov

Modern Web Development with Nuxt3 thumbnail
41:43
almost 5 years ago

Modern Web Development with Nuxt3

Alexander Lichter

Making neural networks portable with ONNX thumbnail
54:49
almost 5 years ago

Making neural networks portable with ONNX

Ron Dagdag

JavaScript the Grumpy Parts thumbnail
46:08
almost 5 years ago

JavaScript the Grumpy Parts

Rob Richardson

Related videos

Build and Deploy a Fullstack App with Open Source Tooling thumbnail
25:53
World Congress 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

Developing a clean architecture-inspired React application with MVVM thumbnail
41:08
Europe 2026 Virtual • 3 months ago

Developing a clean architecture-inspired React application with MVVM

Marc Brehmer

Building Interactive Async UI with React 19 and Ariakit thumbnail
25:22
World Congress 2025 • about 1 year 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 • almost 5 years ago

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

Anna Mcdougall

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.