Whats new in Fielder V2
Tags: react, webdev, javascript
Published: 2021-01-01 12:34:39

A [new major release](https://github.com/andyrichardson/fielder/releases/tag/v2.0.0) of Fielder is now live 🚀🎉

This latest release has been the result of countless hours exploring form design - here's what's new!

## How we got here

With the [initial release](https://dev.to/andyrichardsonn/why-we-need-another-form-library-fielder-4eah) of Fielder, the goal was to create a form library that was unbound from existing form library constraints.

Removing the rigidity of monolithic validation schemas, Fielder posed as a simpler solution for forms by coupling validation to fields rather than forms.

```tsx
const [fieldProps, fieldMeta] = useField({
  name: "username",
  validate: useCallback((value) => {
    if (!value) {
      throw Error("Username is required!");
    }
  }, []),
});
```

_Example field-first validation in Fielder V1_

This change in approach has proven to be effective in creating simple and flexible forms which can evolve over time [(with exception)](https://github.com/andyrichardson/fielder/issues/219).

This [latest release](https://github.com/andyrichardson/fielder/releases/tag/v2.0.0) compliments this mantra, continuing the focus on evolutionary and adaptive form design.

## New features

Along with bug fixes and optimizations, this release comes with two major features which are designed to:

- Make validation even more flexible
- Remove the need for user-created form state

### Validation events

[Validation events](https://fielder.andyrichardson.dev/guides/validation#validation-events) are a new addition to Fielder which simplify specifying _when_ validation occurs and _what_ validation logic is executed for a given event.

```tsx
const usernameValidation = ({ value, trigger }) => {
  // Event agnostic validation (sync)
  if (!value) {
    throw Error("Username is required");
  }

  // Validation on submit (async)
  if (trigger == "submit") {
    return isUsernameTaken(value).then((taken) => {
      if (taken) {
        throw Error("Username is already taken");
      }
    });
  }
};
```

In this above example, you can see we are able to run more expensive async validation exclusively on validation events such as `submit`.

### Submission

Complimenting the new validation events, there's a new `useSubmit` hook which can be used for completion and progression in a form.

> See the new [submission guide](https://fielder.andyrichardson.dev/guides/submission) in the docs

```tsx
const { isValidating, hasSubmitted, handleSubmit } = useSubmit(() => {
  console.log("Submit validation succeeded!");
});

handleSubmit(); // Trigger submission
```

It returns a `handleSubmit` function which guards submission logic from being called until validation completes.

There's also additional state for tracking the status of async `submit` validation (`isValidating`) and for tracking whether the `handleSubmit` function has been called (`hasSubmitted`).

Combined with validation events, this hook provides all the necessary tools to do complex submit-specific validation without ever having to introduce your own state.

```tsx
const usernameValidation = ({ value, trigger }) => {
  if (!value) {
    throw Error("Username is required");
  }

  if (trigger == "submit") {
    return isUsernameTaken(value).then(taken => {
      if (taken) {
        throw Error("Username is already taken");
      }
    })
  }
}

const Form = () => {
  const [usernameProps, usernameMeta] = useField({
    name: 'username',
    initialValue: '',
    validate: usernameValidation  
  });

  const { isValidating, hasSubmitted, handleSubmit } = useSubmit((values) => {
    fetch('/submit-form', {
      method: 'POST',
      body: JSON.stringify(values),
    });
  });

  return (
    <div>
      <input type="text" {...usernameProps} />
      <button onClick={handleSubmit}>
        {isValidating ? <Spinner /> : "Submit"}
      </button>
    </div>
  );
}
```

## Get started

Whether you're new or looking to update, head on over to the [docs site](https://fielder.andyrichardson.dev/) to get started and be sure to check out the new [live examples](https://fielder.andyrichardson.dev/examples/static-forms).

---

Hopefully, you found this interesting! If you have any thoughts or comments, feel free to drop them below or hit me up on twitter - [@andyrichardsonn](https://twitter.com/andyrichardsonn)

Disclaimer: All thoughts and opinions expressed in this article are my own.