BT

Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ

Topics

Choose your language

InfoQ Homepage News Vest, a New Javascript Form Validation Framework

Vest, a New Javascript Form Validation Framework

This item in japanese

Bookmarks

Vest is a new framework-agnostic form validation library that separates the validation logic from the feature logic while using a unit testing syntax style that is similar to Mocha and Jasmine.

Implementing simple form validation is trivial. However, as applications and forms become more complex, so does the validation process, often resulting in code that is hard to read and maintain.

To address these challenges, Vest adopted common practices from modern unit testing frameworks. Validation logic exists in separate files and uses a syntax that is similar to what developers use in Jasmine or Mocha. This makes it easier to understand, maintain, and refactor the validations when needed.

Developers who write unit tests using modern frameworks should be familiar with the core concepts of Vest. A validation file behaves quite similarly to a 'spec' file reflecting the form or feature structure.

However, unlike unit tests, Vest validation runs in production and is called directly from your codebase.

Vest uses the 'test' keyword to describe what we are testing. Each test includes one or more 'enforce' functions that include that actual validation. This works quite similarly to how Jasmine and Mocha use the 'describe' and 'it' functions.

While Vest can validate any type of input, it's most commonly used for form validation. The following example includes validation for a single field called 'name' that requires three or more characters.

export default vest.create('formName', (data = {}, changedField) => {
  vest.only(changedField);

  test('name', 'Must be at least three chars long', () => {
    enforce(data.name.value)
      .longerThan(2);
  });
})

The 'test' function accepts three properties: the name of the field, the validation error that would be returned, and finally, the validation function. Since each 'test' function returns a single error message, it's encouraged to use multiple tests with a single enforce function within them.

By default, failing tests return an error. However, in some cases, developers might only wish to warn the user. To achieve that, simply use 'vest.warn()' within the validation function.

Vest returns a result object that contains an aggregated count of the errors and warnings, as well as detailed information for each test and group.

The full Vest API can be found on the official website, which also includes a short tutorial and integration examples for major JavaScript frameworks.

Vest is an open source library available under the MIT license. Contributions and feedback are encouraged via the GitHub project and should follow the Vest contribution guidelines.

Rate this Article

Adoption
Style

BT