Quick introduction to isomorphic-validation javascript library.

Isomorphic-validation is a Javascript library that allows writing the same validation logic once for client and server side, reuse it across different forms in your app, and offers a straightforward way of creating UI effects for indicating fields validity state. In this video I wanted to show how easily client side form validation can be made with this library. See the playground with the code from the video. The concept is simple. When running on the client side, a Validation object was designed to be used as an event handler. Validation objects can be grouped into another object so that a single Validation is in the "valid" state when all predicates return true (or a Promise with true in case they are asynchronous) and a grouping Validation is in the "valid" state when its all grouped Validation objects are in the "valid" state as well. Validation and Predicate objects can be in one of the following states: started -> valid|invalid -> [changed] -> validated. You can think of it as a finite-state machine. A validation result at each state (except for valid and invalid) can be either true or false. We simply need to declare effect values with desired delays for validation result states and associate UI effects with desired Validation and Predicate states. This approach makes for seemingly linear code, all asynchronicity and conditionals are abstracted away.

Apr 27, 2025 - 18:41

Quick introduction to isomorphic-validation javascript library.

Isomorphic-validation is a Javascript library that allows writing the same validation logic once for client and server side, reuse it across different forms in your app, and offers a straightforward way of creating UI effects for indicating fields validity state.

In this video I wanted to show how easily client side form validation can be made with this library.

See the playground with the code from the video.

The concept is simple.

When running on the client side, a Validation object was designed to be used as an event handler. Validation objects can be grouped into another object so that a single Validation is in the "valid" state when all predicates return true (or a Promise with true in case they are asynchronous) and a grouping Validation is in the "valid" state when its all grouped Validation objects are in the "valid" state as well.

Validation and Predicate objects can be in one of the following states: started -> valid|invalid -> [changed] -> validated. You can think of it as a finite-state machine. A validation result at each state (except for valid and invalid) can be either true or false.

We simply need to declare effect values with desired delays for validation result states and associate UI effects with desired Validation and Predicate states. This approach makes for seemingly linear code, all asynchronicity and conditionals are abstracted away.