Handling asynchronous validators and mutually dependent fields using Isomorphic-validation library.

In the previous video Quick introduction to isomorphic-validation javascript library I demonstrated how quickly a user-friendly form can be created with UI effects connected to fields' validity states. This is the second part in which I wanted to touch: working with asynchronous validators; conditional execution of validators; handling password and password confirmation fields. See the playground with the code from the video. In this video I showed how a typical sign-up logic can be implemented such as checking an e-mail for being already occupied before submitting a form to create a new account. Asynchronous validators are handled in the same way as synchronous, you only need to keep in mind that their execution takes time. We are simply playing with timings to create UI effects such as showing loaders/spinners while a request is being processed. It is recommended to execute asynchronous validators conditionally when they are mixed with synchronous. For that, this library provides a feature that implements a simple logic: following validators can not be "valid" without the preceding being "valid", therefore it is not necessary to execute them. For example, it doesn't make sense to make a request to the server to check if an e-mail already registered if it doesn't conform to the E-mail format. Also, you don't have to worry about an async validator retrieving an irrelevant result if the user keeps typing while the request is being processed. The library handles such edge cases for you. Handling fields with validity states depending on each other, such as password and password confirmation, is as easy as handling one field. Also, if you need to implement the logic of one field depending on another it is possible using an auxiliary Validation object.

May 4, 2025 - 09:56
 0
Handling asynchronous validators and mutually dependent fields using Isomorphic-validation library.

In the previous video Quick introduction to isomorphic-validation javascript library I demonstrated how quickly a user-friendly form can be created with UI effects connected to fields' validity states.

This is the second part in which I wanted to touch:

  • working with asynchronous validators;
  • conditional execution of validators;
  • handling password and password confirmation fields.

See the playground with the code from the video.

In this video I showed how a typical sign-up logic can be implemented such as checking an e-mail for being already occupied before submitting a form to create a new account.

Asynchronous validators are handled in the same way as synchronous, you only need to keep in mind that their execution takes time. We are simply playing with timings to create UI effects such as showing loaders/spinners while a request is being processed.

It is recommended to execute asynchronous validators conditionally when they are mixed with synchronous. For that, this library provides a feature that implements a simple logic: following validators can not be "valid" without the preceding being "valid", therefore it is not necessary to execute them. For example, it doesn't make sense to make a request to the server to check if an e-mail already registered if it doesn't conform to the E-mail format. Also, you don't have to worry about an async validator retrieving an irrelevant result if the user keeps typing while the request is being processed. The library handles such edge cases for you.

Handling fields with validity states depending on each other, such as password and password confirmation, is as easy as handling one field. Also, if you need to implement the logic of one field depending on another it is possible using an auxiliary Validation object.