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)