remix-validated-form 4.6.5 → 4.6.7
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +10 -9
- package/dist/index.cjs.js +1930 -0
- package/dist/index.cjs.js.map +1 -0
- package/dist/index.d.ts +337 -0
- package/dist/{remix-validated-form.es.js → index.esm.js} +603 -905
- package/dist/index.esm.js.map +1 -0
- package/package.json +14 -10
- package/src/ValidatedForm.tsx +17 -5
- package/src/hooks.ts +1 -1
- package/src/server.ts +1 -1
- package/tsup.config.ts +3 -0
- package/dist/remix-validated-form.cjs.js +0 -27
- package/dist/remix-validated-form.cjs.js.map +0 -1
- package/dist/remix-validated-form.es.js.map +0 -1
- package/dist/remix-validated-form.umd.js +0 -27
- package/dist/remix-validated-form.umd.js.map +0 -1
- package/dist/types/ValidatedForm.d.ts +0 -50
- package/dist/types/hooks.d.ts +0 -67
- package/dist/types/index.d.ts +0 -7
- package/dist/types/internal/MultiValueMap.d.ts +0 -11
- package/dist/types/internal/constants.d.ts +0 -3
- package/dist/types/internal/flatten.d.ts +0 -1
- package/dist/types/internal/formContext.d.ts +0 -12
- package/dist/types/internal/getInputProps.d.ts +0 -29
- package/dist/types/internal/hooks.d.ts +0 -35
- package/dist/types/internal/hydratable.d.ts +0 -14
- package/dist/types/internal/logic/getCheckboxChecked.d.ts +0 -1
- package/dist/types/internal/logic/getRadioChecked.d.ts +0 -1
- package/dist/types/internal/logic/requestSubmit.d.ts +0 -5
- package/dist/types/internal/state/arrayUtil.d.ts +0 -12
- package/dist/types/internal/state/controlledFields.d.ts +0 -7
- package/dist/types/internal/state/createFormStore.d.ts +0 -79
- package/dist/types/internal/state/fieldArray.d.ts +0 -28
- package/dist/types/internal/state/storeHooks.d.ts +0 -3
- package/dist/types/internal/state/types.d.ts +0 -1
- package/dist/types/internal/submissionCallbacks.d.ts +0 -1
- package/dist/types/internal/util.d.ts +0 -5
- package/dist/types/server.d.ts +0 -21
- package/dist/types/unreleased/formStateHooks.d.ts +0 -64
- package/dist/types/userFacingFormContext.d.ts +0 -85
- package/dist/types/validation/createValidator.d.ts +0 -7
- package/dist/types/validation/types.d.ts +0 -58
- package/vite.config.ts +0 -7
package/README.md
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
# Remix Validated Form
|
2
2
|
|
3
|
-
A form library built for [
|
3
|
+
A form library built for [Remix](https://remix.run) to make validation easy.
|
4
4
|
|
5
5
|
- Client-side, field-by-field and form-level validation
|
6
6
|
- Re-use validation on the server
|
@@ -107,7 +107,8 @@ export const MySubmitButton = () => {
|
|
107
107
|
Now that we have our components, making a form is easy!
|
108
108
|
|
109
109
|
```tsx
|
110
|
-
import {
|
110
|
+
import { DataFunctionArgs, json, redirect } from "@remix-run/node";
|
111
|
+
import { useLoaderData } from "@remix-run/react";
|
111
112
|
import * as yup from "yup";
|
112
113
|
import { validationError, ValidatedForm, withYup } from "remix-validated-form";
|
113
114
|
import { MyInput, MySubmitButton } from "~/components/Input";
|
@@ -121,7 +122,7 @@ const validator = withYup(
|
|
121
122
|
})
|
122
123
|
);
|
123
124
|
|
124
|
-
export const action
|
125
|
+
export const action = async ({ request }: DataFunctionArgs) => {
|
125
126
|
const fieldValues = await validator.validate(await request.formData());
|
126
127
|
if (fieldValues.error) return validationError(fieldValues.error);
|
127
128
|
const { firstName, lastName, email } = fieldValues.data;
|
@@ -131,18 +132,18 @@ export const action: ActionFunction = async ({ request }) => {
|
|
131
132
|
return redirect("/");
|
132
133
|
};
|
133
134
|
|
134
|
-
export const loader
|
135
|
-
return {
|
135
|
+
export const loader = async (args: DataFunctionArgs) => {
|
136
|
+
return json({
|
136
137
|
defaultValues: {
|
137
138
|
firstName: "Jane",
|
138
139
|
lastName: "Doe",
|
139
140
|
email: "jane.doe@example.com",
|
140
141
|
},
|
141
|
-
};
|
142
|
+
});
|
142
143
|
};
|
143
144
|
|
144
145
|
export default function MyForm() {
|
145
|
-
const { defaultValues } = useLoaderData();
|
146
|
+
const { defaultValues } = useLoaderData<typeof loader>();
|
146
147
|
return (
|
147
148
|
<ValidatedForm
|
148
149
|
validator={validator}
|
@@ -164,7 +165,7 @@ You can use nested objects and arrays by using a period (`.`) or brackets (`[]`)
|
|
164
165
|
|
165
166
|
```tsx
|
166
167
|
export default function MyForm() {
|
167
|
-
const { defaultValues } = useLoaderData();
|
168
|
+
const { defaultValues } = useLoaderData<typeof loader>();
|
168
169
|
return (
|
169
170
|
<ValidatedForm
|
170
171
|
validator={validator}
|
@@ -257,7 +258,7 @@ We recommend this approach since the validation will still work even if JS is di
|
|
257
258
|
## How do we trigger toast messages on success?
|
258
259
|
|
259
260
|
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
|
260
|
-
See the [Remix](https://remix.run/docs/en/v1/
|
261
|
+
See the [Remix](https://remix.run/docs/en/v1/utils/sessions#sessionflashkey-value) documentation for more information.
|
261
262
|
|
262
263
|
## Why is my cancel button triggering form submission?
|
263
264
|
|