Zod Form Data 1.2.0

New helper zfd.json

Useful for situations where you're putting a JSON string in a hidden input.

Doc

Remix Validated Form v4.1.0

New Feature

All hooks can now be used outside the context of a ValidatedForm if a formId is provided. This aligns with the HTML api of passing a form prop to a native form control to associated it with a form even if it's not inside that form. Read more about this here.

There are also a few bug fixes included in this release.

Remix Validated Form 4

Remix Validated Form 4

Async validation 🎉

zod and yup schemas with async validations are now supported. Read more about this here. (Thanks @TheRealFlyingCoder!)

Support auto-focusing inputs outside of the form element

If you have any inputs portaled outside the actual form element (but still a child of the ValidatedForm) it will now be able to receive focus automatically if it has a validation error. Before, when submitting the form, it would only focus errored inputs within the form itself.

useIsValid hook

A handy hook to get access to the isValid value from context without tapping directly into useFormContext.

Bug fixes

• Fixed a bug where isValid wasn't correctly becoming true when the form errors were cleared. (#52)

Breaking changes & migration guide

Validators are now async

This should only impact your server code.

- const result = validator.validate(await request.formData())
+ const result = await validator.validate(await request.formData())

You will also need to update your with-zod or with-yup to the latest version (2.0.0 for both).

npm install @remix-validated-form/with-zod@latest

or

npm install @remix-validated-form/with-yup@latest

Form hooks can no longer be used outside of a ValidatedForm

Previously, all the hooks (useField, useIsSubmitting, etc), could be used outside of a ValidatedForm but wouldn't actually do anything. I originally did this because I thought I might want to use my inputs in a native form or plain remix Form. In practice, it rarely makes sense to use anything but ValidatedForm and having the hooks not throw an error outside a form has caused a lot of confusion.

If you have cases where you're using your inputs outside of a ValidatedForm, there are a couple options.

• Separate your components into an Input and a ValidatedInput
• Use a ValidatedForm instead of a regular Form / form

Forms are no longer automatically repopulated in the no-JS case

If supporting users without JS is not important to you, this is not really breaking at all. If it is, I recommend reading the docs on this topic here.

To keep the behavior exactly how it was, this is the change:

- if (result.error) return validationError(result.error);
+ if (result.error) return validationError(result.error, result.submittedData);

Why make this change?:

• There are a few caveats to repopulating form data that I've outlined in the validationError docs.
• I don't think this library should automatically return data without the developer being aware of what's going on. If your form involves sensitive data, you should have full control over what's being returned from your API.

Data expected by validationError has changed

If you were following the "Supporting additional validations" section in the validationError docs, you will need to update the data you're passing to validationError.

- return validationError({ myField: "My error" }, result.data);
+ return validationError({ fieldErrors: { myField: "My error" }, subaction: result.data.subaction }, result.data)

Zod Form Data 1.1.0

New Features

zfd.file

A new helper to assist in asserting required/optional on file inputs. Docs here.

Accept a zod schema in zfd.formData

zfd.formData can now accept a zod schema in addition to accepting objects. Docs here

PRs

Includes #40

Remix Validated Form v3.4.0

New Feature

Added handling to getInputProps for checkboxes and radio inputs. To use this, make sure you pass the type prop through getInputProps.

<input {...getInputProps({ type: 'checkbox' })} />

Zod Form Data v1.0.0

This is a release of a new package, zod-form-data. It's designed to help ease some pain-points for writing zod schema for form data.

Docs: https://www.remix-validated-form.io/zod-form-data

Remix Validated Form v3.3.0

New Features

This adds support for automatically handling multiple inputs that have the same name.

PRs

Includes #24

Remix Validated Form v3.2.0

New Features

getInputProps

useField is now a lot simpler to use for most cases thanks to the new getInputProps. You can read about it in more detail here.

import { useField } from "remix-validated-form";

type MyInputProps = {
  name: string;
  label: string;
};

export const MyInput = ({ name, label }: InputProps) => {
  const { error, getInputProps } = useField(name);
  return (
    <div>
      <label htmlFor={name}>{label}</label>
      <input {...getInputProps({ id: name })} />
      {error && (
        <span className="my-error-class">{error}</span>
      )}
    </div>
  );
};

Touched states

It is now possible to track the touched state of a field with the touched and setTouched return values of useField (docs).

hasBeenSubmitted in form context

You can now determine if the user has attempted to submit the form using hasBeenSubmitted from useFormContext (docs).

Docs changes

The props headers in the reference section are now linkable. 😄

PRs

Includes #25

v3.1.0

Adds two new features:

• An isValid value is now returned from useFormContext.
• When form validation fails via an attempted submit, the first invalid input will be focused. It is also now possible to use useField to specify a handleReceiveFocus callback that will be called when an input is going to receive focus this way. This is primarily to support custom components that use hidden inputs for their value and some other ui for the "input".

v3.0.0

Breaking Change

The withZod and withYup validators are now published as separate packages.
This was done to prevent you from needing to install both zod and yup in order to appease Typescript.

Migration

Update and install packages

Install the updated remix-validated-form and the adapter package of your choice

npm install remix-validated-form@latest @remix-validated-form/with-zod

or

npm install remix-validated-form@latest @remix-validated-form/with-zod

Change imports

Change these imports

import { withYup, withZod } from 'remix-validated-form';

to this

import { withYup } from '@remix-validated-form/with-yup';
import { withZod } from '@remix-validated-form/with-zod';

PRs included

• Separate packages by @airjp73 in #14

Full Changelog: v2.1.1...v3.0.0