Gathering detailed insights and metrics for remix-validated-form
Gathering detailed insights and metrics for remix-validated-form
Gathering detailed insights and metrics for remix-validated-form
Gathering detailed insights and metrics for remix-validated-form
@remix-validated-form/with-zod
Zod adapter for [remix-validated-form](https://github.com/airjp73/remix-validated-form).
@remix-validated-form/with-yup
Yup adapter for [remix-validated-form](https://github.com/airjp73/remix-validated-form).
@deepkit-modules/remix-validated-form
zod-form-data
Validation helpers for [zod](https://github.com/colinhacks/zod) specifically for parsing `FormData` or `URLSearchParams`. This is particularly useful when using [Remix](https://github.com/remix-run/remix) and combos well with [remix-validated-form](https:
Easy form validation and state management for React and Remix
npm install remix-validated-form
Typescript
Module System
Node Version
NPM Version
84.7
Supply Chain
90.8
Quality
75
Maintenance
50
Vulnerability
98.6
License
zod-form-data v3
Updated on May 30, 2025
v7.1.0 -- Standard Schema support
Updated on Apr 13, 2025
v7 -- React 19 & React Router 7 support
Updated on Dec 18, 2024
React/Remix 6.2.0
Updated on Sep 27, 2024
RVF v6 🎉
Updated on Aug 08, 2024
remix-validated-form-v5.1.0
Updated on Aug 14, 2023
TypeScript (90.05%)
MDX (8.08%)
JavaScript (1.17%)
CSS (0.67%)
Shell (0.03%)
Total Downloads
3,044,389
Last Day
555
Last Week
15,492
Last Month
70,457
Last Year
1,188,395
MIT License
947 Stars
1,597 Commits
71 Forks
5 Watchers
27 Branches
48 Contributors
Updated on Jun 30, 2025
Latest Version
5.1.5
Package Id
remix-validated-form@5.1.5
Unpacked Size
743.91 kB
Size
152.57 kB
File Count
78
NPM Version
10.1.0
Node Version
20.7.0
Published on
Sep 25, 2023
Cumulative downloads
Total Downloads
Last Day
-25.7%
555
Compared to previous day
Last Week
-10.5%
15,492
Compared to previous week
Last Month
-12.1%
70,457
Compared to previous month
Last Year
-1.5%
1,188,395
Compared to previous year
A form library built for Remix to make validation easy.
The docs are located a remix-validated-form.io.
https://user-images.githubusercontent.com/2811287/145734901-700a5085-a10b-4d89-88e1-5de9142b1e85.mov
To run sample-app
:
1git clone https://github.com/airjp73/remix-validated-form 2cd ./remix-validated-form 3yarn install 4yarn build 5yarn sample-app
1npm install remix-validated-form
There are official adapters available for zod
and yup
.
If you're using a different library, see the Validation library support section below.
1npm install @remix-validated-form/with-zod
If you're using zod, you might also find zod-form-data
helpful.
In order to display field errors or do field-by-field validation, it's recommended to incorporate this library into an input component using useField
.
1import { useField } from "remix-validated-form"; 2 3type MyInputProps = { 4 name: string; 5 label: string; 6}; 7 8export const MyInput = ({ name, label }: MyInputProps) => { 9 const { error, getInputProps } = useField(name); 10 return ( 11 <div> 12 <label htmlFor={name}>{label}</label> 13 <input {...getInputProps({ id: name })} /> 14 {error && <span className="my-error-class">{error}</span>} 15 </div> 16 ); 17};
To best take advantage of the per-form submission detection, we can create a submit button component.
1import { useFormContext, useIsSubmitting } from "remix-validated-form"; 2 3export const MySubmitButton = () => { 4 const isSubmitting = useIsSubmitting(); 5 const { isValid } = useFormContext(); 6 const disabled = isSubmitting || !isValid; 7 8 return ( 9 <button 10 type="submit" 11 disabled={disabled} 12 className={disabled ? "disabled-btn" : "btn"} 13 > 14 {isSubmitting ? "Submitting..." : "Submit"} 15 </button> 16 ); 17};
Now that we have our components, making a form is easy.
1import { DataFunctionArgs, json, redirect } from "@remix-run/node"; 2import { useLoaderData } from "@remix-run/react"; 3import * as yup from "yup"; 4import { validationError, ValidatedForm, withYup } from "remix-validated-form"; 5import { MyInput, MySubmitButton } from "~/components/Input"; 6 7// Using yup in this example, but you can use anything 8const validator = withYup( 9 yup.object({ 10 firstName: yup.string().label("First Name").required(), 11 lastName: yup.string().label("Last Name").required(), 12 email: yup.string().email().label("Email").required(), 13 }) 14); 15 16export const action = async ({ request }: DataFunctionArgs) => { 17 const fieldValues = await validator.validate(await request.formData()); 18 if (fieldValues.error) return validationError(fieldValues.error); 19 const { firstName, lastName, email } = fieldValues.data; 20 21 // Do something with correctly typed values; 22 23 return redirect("/"); 24}; 25 26export const loader = async (args: DataFunctionArgs) => { 27 return json({ 28 defaultValues: { 29 firstName: "Jane", 30 lastName: "Doe", 31 email: "jane.doe@example.com", 32 }, 33 }); 34}; 35 36export default function MyForm() { 37 const { defaultValues } = useLoaderData<typeof loader>(); 38 return ( 39 <ValidatedForm 40 validator={validator} 41 method="post" 42 defaultValues={defaultValues} 43 > 44 <MyInput name="firstName" label="First Name" /> 45 <MyInput name="lastName" label="Last Name" /> 46 <MyInput name="email" label="Email" /> 47 <MySubmitButton /> 48 </ValidatedForm> 49 ); 50}
You can use nested objects and arrays by using a period (.
) or brackets ([]
) for the field names.
1export default function MyForm() { 2 const { defaultValues } = useLoaderData<typeof loader>(); 3 return ( 4 <ValidatedForm 5 validator={validator} 6 method="post" 7 defaultValues={defaultValues} 8 > 9 <MyInput name="firstName" label="First Name" /> 10 <MyInput name="lastName" label="Last Name" /> 11 <MyInput name="address.street" label="Street" /> 12 <MyInput name="address.city" label="City" /> 13 <MyInput name="phones[0].type" label="Phone 1 Type" /> 14 <MyInput name="phones[0].number" label="Phone 1 Number" /> 15 <MyInput name="phones[1].type" label="Phone 2 Type" /> 16 <MyInput name="phones[1].number" label="Phone 2 Number" /> 17 <MySubmitButton /> 18 </ValidatedForm> 19 ); 20}
There are official adapters available for zod
and yup
, but you can easily support whatever library you want by creating your own adapter.
And if you create an adapter for a library, feel free to make a PR on this repository 😊
Any object that conforms to the Validator
type can be passed into the the ValidatedForm
's validator
prop.
1type FieldErrors = Record<string, string>; 2 3type ValidationResult<DataType> = 4 | { data: DataType; error: undefined } 5 | { error: FieldErrors; data: undefined }; 6 7type ValidateFieldResult = { error?: string }; 8 9type Validator<DataType> = { 10 validate: (unvalidatedData: unknown) => ValidationResult<DataType>; 11 validateField: ( 12 unvalidatedData: unknown, 13 field: string 14 ) => ValidateFieldResult; 15};
In order to make an adapter for your validation library of choice, you can create a function that accepts a schema from the validation library and turns it into a validator.
Note the use of createValidator
.
It takes care of unflattening the data for nested objects and arrays since the form doesn't know anything about object and arrays and this should be handled by the adapter.
For more on this you can check the implementations for withZod
and withYup
.
The out-of-the-box support for yup
in this library works as the following:
1export const withYup = <Schema extends AnyObjectSchema>( 2 validationSchema: Schema 3 // For best result with Typescript, we should type the `Validator` we return based on the provided schema 4): Validator<InferType<Schema>> => 5 createValidator({ 6 validate: (unvalidatedData) => { 7 // Validate with yup and return the validated & typed data or the error 8 9 if (isValid) return { data: { field1: "someValue" }, error: undefined }; 10 else return { error: { field1: "Some error!" }, data: undefined }; 11 }, 12 validateField: (unvalidatedData, field) => { 13 // Validate the specific field with yup 14 15 if (isValid) return { error: undefined }; 16 else return { error: "Some error" }; 17 }, 18 });
remix-validated-form
ones?This is happening because you or the library you are using is passing the required
attribute to the fields.
This library doesn't take care of eliminating them and it's up to the user how they want to manage the validation errors.
If you wan't to disable all native HTML validations you can add noValidate
to <ValidatedForm>
.
We recommend this approach since the validation will still work even if JS is disabled.
Problem: how do we trigger a toast message on success if the action redirects away from the form route? The Remix solution is to flash a message in the session and pick this up in a loader function, probably in root.tsx See the Remix documentation for more information.
Problem: the cancel button has an onClick handler to navigate away from the form route but instead it is submitting the form.
A button defaults to type="submit"
in a form which will submit the form by default. If you want to prevent this you can add type="reset"
or type="button"
to the cancel button.
No vulnerabilities found.
No security vulnerabilities found.