Remix Validated Form v5

Breaking changes

Minimum version of Remix now 1.15.0

We've removed the deprecated useTransition API in favor of useNavigation. I'm not sure which version this API was introduced, so I set the peer dependency to 1.15.0.

with-yup v3

@remix-validated-form/with-yup now requires a minimum yup version of 1.0.0.

Validation behavior changed when validating one field

In order to improve the DX when using dependent validations, validating a single field now checks other fields in the form as well. The behavior for that is like this:

• If another field no longer has an error, it will be cleared automatically.
• If another field's error has changed, it will be updated automatically.
• If another field has a new error, it will only add the error if the field has been touched or the form has already been submitted unsuccessfully.

In practice, these changes should only be noticeable when the validity of a field changes based on the value of another field.

Field array API changed

useFieldArray and FieldArray have had some changes to their APIs. We now automatically generate a key for each item in the array and adjusted the API slightly to accommodate it.

Here's an example of migrating to the changed API.

  const [items, helpers, error] = useFieldArray("myFieldArray");

  return items.map((item, index) => (
-   <li key={item.id}>
+   <li key={item.key}>
      <input
        name={`myFieldArray[${index}].id`}
        type="hidden" 
-       value={item.id}
+       value={item.defaultValue.id}
      />
      <MyCustomInput name={`myFieldArray[${index}].value`} />
    </li>
  );

Values in the form are now captured before validation occurs

It's unlikely you will have anything break due to this change, but it is technically a breaking change. Previously, it was possible to change the values in the form while validation was occurring, and that would change the values that ultimately got sent to the server.

This will now never happen. The values that are in the form when the submit is initiated are the values that will be sent to the server.

Added type narrowing based on the subaction prop

The inferred values of data in the onSubmit prop will now be narrowed based on the subaction prop if you supply a validator that includes validations for multiple subactions.

This is technically a breaking change but only in rare cases. If your validator doesn't reference a subaction at all, then the type will be the same as before.

Deprecations

Validator["validateField"]

The validateField property in custom validators is now optional and deprecated. Remix Validated Form no longer calls into this function. It's also not always useful to implement this for some validation libraries (see zod adapter), which don't actually support validating only a specific field.

Non-breaking changes

FieldArray now generic

Previously, only the hook version (useFieldArray) was generic. Now, both versions are.

PRs merged

• Support yup 1.0 by @jnicklas in #288
• Moving useTransition -> useNavigation by @ZipBrandon in #284
• Fix: prevent scroll to reset not working by @nimaa77 in #291
• Export FORM_DEFAULTS_FIELD to fix #227 by @stephenwade in #281

New Contributors

• @ZipBrandon made their first contribution in #284
• @nimaa77 made their first contribution in #291
• @stephenwade made their first contribution in #281

Full Changelog: remix-validated-form-v4.6.12...remix-validated-form-v5