remix-validated-form 2.0.1-beta.0 → 3.0.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +2 -2
- package/.turbo/turbo-test.log +36 -0
- package/README.md +232 -0
- package/browser/ValidatedForm.d.ts +13 -1
- package/browser/ValidatedForm.js +72 -19
- package/browser/index.d.ts +0 -2
- package/browser/index.js +0 -2
- package/browser/internal/submissionCallbacks.d.ts +1 -0
- package/browser/internal/submissionCallbacks.js +13 -0
- package/browser/validation/createValidator.js +12 -1
- package/browser/validation/types.d.ts +3 -0
- package/browser/validation/validation.test.js +5 -0
- package/build/ValidatedForm.d.ts +13 -1
- package/build/ValidatedForm.js +71 -18
- package/build/index.d.ts +0 -2
- package/build/index.js +0 -2
- package/build/internal/submissionCallbacks.d.ts +1 -0
- package/build/internal/submissionCallbacks.js +17 -0
- package/build/validation/createValidator.js +12 -1
- package/build/validation/types.d.ts +3 -0
- package/build/validation/validation.test.js +5 -0
- package/package.json +6 -9
- package/src/ValidatedForm.tsx +96 -18
- package/src/index.ts +0 -2
- package/src/internal/submissionCallbacks.ts +15 -0
- package/src/validation/createValidator.ts +12 -2
- package/src/validation/types.ts +2 -0
- package/jest.config.js +0 -10
- package/src/test-data/testFormData.ts +0 -55
- package/src/validation/validation.test.ts +0 -317
- package/src/validation/withYup.ts +0 -43
- package/src/validation/withZod.ts +0 -51
package/.turbo/turbo-build.log
CHANGED
@@ -1,9 +1,9 @@
|
|
1
1
|
[2K[1G[2m$ npm run build:browser && npm run build:main[22m
|
2
2
|
|
3
|
-
> remix-validated-form@2.
|
3
|
+
> remix-validated-form@2.1.1 build:browser
|
4
4
|
> tsc --module ESNext --outDir ./browser
|
5
5
|
|
6
6
|
|
7
|
-
> remix-validated-form@2.
|
7
|
+
> remix-validated-form@2.1.1 build:main
|
8
8
|
> tsc --module CommonJS --outDir ./build
|
9
9
|
|
@@ -0,0 +1,36 @@
|
|
1
|
+
[2K[1G[2m$ jest src[22m
|
2
|
+
[0m[7m[1m[32m PASS [39m[22m[27m[0m [2msrc/validation/[22m[1mvalidation.test.ts[22m
|
3
|
+
Validation
|
4
|
+
Adapter for yup
|
5
|
+
validate
|
6
|
+
[32m✓[39m [2mshould return the data when valid (2 ms)[22m
|
7
|
+
[32m✓[39m [2mshould return field errors when invalid (1 ms)[22m
|
8
|
+
[32m✓[39m [2mshould unflatten data when validating[22m
|
9
|
+
[32m✓[39m [2mshould accept FormData directly and return errors (1 ms)[22m
|
10
|
+
[32m✓[39m [2mshould accept FormData directly and return valid data (1 ms)[22m
|
11
|
+
validateField
|
12
|
+
[32m✓[39m [2mshould not return an error if field is valid[22m
|
13
|
+
[32m✓[39m [2mshould not return an error if a nested field is valid (1 ms)[22m
|
14
|
+
[32m✓[39m [2mshould return an error if field is invalid (2 ms)[22m
|
15
|
+
[32m✓[39m [2mshould return an error if a nested field is invalid[22m
|
16
|
+
Adapter for zod
|
17
|
+
validate
|
18
|
+
[32m✓[39m [2mshould return the data when valid (1 ms)[22m
|
19
|
+
[32m✓[39m [2mshould return field errors when invalid[22m
|
20
|
+
[32m✓[39m [2mshould unflatten data when validating (1 ms)[22m
|
21
|
+
[32m✓[39m [2mshould accept FormData directly and return errors[22m
|
22
|
+
[32m✓[39m [2mshould accept FormData directly and return valid data[22m
|
23
|
+
validateField
|
24
|
+
[32m✓[39m [2mshould not return an error if field is valid (1 ms)[22m
|
25
|
+
[32m✓[39m [2mshould not return an error if a nested field is valid[22m
|
26
|
+
[32m✓[39m [2mshould return an error if field is invalid[22m
|
27
|
+
[32m✓[39m [2mshould return an error if a nested field is invalid[22m
|
28
|
+
withZod
|
29
|
+
[32m✓[39m [2mreturns coherent errors for complex schemas (1 ms)[22m
|
30
|
+
[32m✓[39m [2mreturns errors for fields that are unions[22m
|
31
|
+
|
32
|
+
[1mTest Suites: [22m[1m[32m1 passed[39m[22m, 1 total
|
33
|
+
[1mTests: [22m[1m[32m20 passed[39m[22m, 20 total
|
34
|
+
[1mSnapshots: [22m0 total
|
35
|
+
[1mTime:[22m 1.1 s, estimated 2 s
|
36
|
+
[2mRan all test suites[22m[2m matching [22m/src/i[2m.[22m
|
package/README.md
ADDED
@@ -0,0 +1,232 @@
|
|
1
|
+
# Remix Validated Form
|
2
|
+
|
3
|
+
A form library built for [remix](https://remix.run) to make validation easy.
|
4
|
+
|
5
|
+
- Client-side, field-by-field validation (e.g. validate on blur) and form-level validation
|
6
|
+
- Set default values for the entire form in one place
|
7
|
+
- Re-use validation on the server
|
8
|
+
- Show validation errors from the server even without JS
|
9
|
+
- Detect if the current form is submitting when there are multiple forms on the page
|
10
|
+
- Supports nested objects and arrays
|
11
|
+
- Validation library agnostic
|
12
|
+
|
13
|
+
# Demo
|
14
|
+
|
15
|
+
https://user-images.githubusercontent.com/2811287/145734901-700a5085-a10b-4d89-88e1-5de9142b1e85.mov
|
16
|
+
|
17
|
+
To run `sample-app`:
|
18
|
+
|
19
|
+
```
|
20
|
+
git clone https://github.com/airjp73/remix-validated-form
|
21
|
+
cd ./remix-validated-form
|
22
|
+
yarn install
|
23
|
+
yarn sample-app
|
24
|
+
```
|
25
|
+
|
26
|
+
# Getting started
|
27
|
+
|
28
|
+
## Install
|
29
|
+
|
30
|
+
```bash
|
31
|
+
npm install remix-validated-form
|
32
|
+
```
|
33
|
+
|
34
|
+
## Create an input component
|
35
|
+
|
36
|
+
In order to display field errors or do field-by-field validation,
|
37
|
+
it's recommended to incorporate this library into an input component using `useField`.
|
38
|
+
|
39
|
+
```tsx
|
40
|
+
import { useField } from "remix-validated-form";
|
41
|
+
|
42
|
+
type MyInputProps = {
|
43
|
+
name: string;
|
44
|
+
label: string;
|
45
|
+
};
|
46
|
+
|
47
|
+
export const MyInput = ({ name, label }: InputProps) => {
|
48
|
+
const { validate, clearError, defaultValue, error } = useField(name);
|
49
|
+
return (
|
50
|
+
<div>
|
51
|
+
<label htmlFor={name}>{label}</label>
|
52
|
+
<input
|
53
|
+
id={name}
|
54
|
+
name={name}
|
55
|
+
onBlur={validate}
|
56
|
+
onChange={clearError}
|
57
|
+
defaultValue={defaultValue}
|
58
|
+
/>
|
59
|
+
{error && <span className="my-error-class">{error}</span>}
|
60
|
+
</div>
|
61
|
+
);
|
62
|
+
};
|
63
|
+
```
|
64
|
+
|
65
|
+
## Create a submit button component
|
66
|
+
|
67
|
+
To best take advantage of the per-form submission detection, we can create a submit button component.
|
68
|
+
|
69
|
+
```tsx
|
70
|
+
import { useIsSubmitting } from "remix-validated-form";
|
71
|
+
|
72
|
+
export const MySubmitButton = () => {
|
73
|
+
const isSubmitting = useIsSubmitting();
|
74
|
+
return (
|
75
|
+
<button type="submit" disabled={isSubmitting}>
|
76
|
+
{isSubmitting ? "Submitting..." : "Submit"}
|
77
|
+
</button>
|
78
|
+
);
|
79
|
+
};
|
80
|
+
```
|
81
|
+
|
82
|
+
## Use the form!
|
83
|
+
|
84
|
+
Now that we have our components, making a form is easy!
|
85
|
+
|
86
|
+
```tsx
|
87
|
+
import { ActionFunction, LoaderFunction, redirect, useLoaderData } from "remix";
|
88
|
+
import * as yup from "yup";
|
89
|
+
import { validationError, ValidatedForm, withYup } from "remix-validated-form";
|
90
|
+
import { MyInput, MySubmitButton } from "~/components/Input";
|
91
|
+
|
92
|
+
// Using yup in this example, but you can use anything
|
93
|
+
const validator = withYup(
|
94
|
+
yup.object({
|
95
|
+
firstName: yup.string().label("First Name").required(),
|
96
|
+
lastName: yup.string().label("Last Name").required(),
|
97
|
+
email: yup.string().email().label("Email").required(),
|
98
|
+
})
|
99
|
+
);
|
100
|
+
|
101
|
+
export const action: ActionFunction = async ({ request }) => {
|
102
|
+
const fieldValues = validator.validate(await request.formData());
|
103
|
+
if (fieldValues.error) return validationError(fieldValues.error);
|
104
|
+
const { firstName, lastName, email } = fieldValues.data;
|
105
|
+
|
106
|
+
// Do something with correctly typed values;
|
107
|
+
|
108
|
+
return redirect("/");
|
109
|
+
};
|
110
|
+
|
111
|
+
export const loader: LoaderFunction = () => {
|
112
|
+
return {
|
113
|
+
defaultValues: {
|
114
|
+
firstName: "Jane",
|
115
|
+
lastName: "Doe",
|
116
|
+
email: "jane.doe@example.com",
|
117
|
+
},
|
118
|
+
};
|
119
|
+
};
|
120
|
+
|
121
|
+
export default function MyForm() {
|
122
|
+
const { defaultValues } = useLoaderData();
|
123
|
+
return (
|
124
|
+
<ValidatedForm
|
125
|
+
validator={validator}
|
126
|
+
method="post"
|
127
|
+
defaultValues={defaultValues}
|
128
|
+
>
|
129
|
+
<MyInput name="firstName" label="First Name" />
|
130
|
+
<MyInput name="lastName" label="Last Name" />
|
131
|
+
<MyInput name="email" label="Email" />
|
132
|
+
<MySubmitButton />
|
133
|
+
</ValidatedForm>
|
134
|
+
);
|
135
|
+
}
|
136
|
+
```
|
137
|
+
|
138
|
+
## Nested objects and arrays
|
139
|
+
|
140
|
+
You can use nested objects and arrays by using a period (`.`) or brackets (`[]`) for the field names.
|
141
|
+
|
142
|
+
```tsx
|
143
|
+
export default function MyForm() {
|
144
|
+
const { defaultValues } = useLoaderData();
|
145
|
+
return (
|
146
|
+
<ValidatedForm
|
147
|
+
validator={validator}
|
148
|
+
method="post"
|
149
|
+
defaultValues={defaultValues}
|
150
|
+
>
|
151
|
+
<MyInput name="firstName" label="First Name" />
|
152
|
+
<MyInput name="lastName" label="Last Name" />
|
153
|
+
<MyInput name="address.street" label="Street" />
|
154
|
+
<MyInput name="address.city" label="City" />
|
155
|
+
<MyInput name="phones[0].type" label="Phone 1 Type" />
|
156
|
+
<MyInput name="phones[0].number" label="Phone 1 Number" />
|
157
|
+
<MyInput name="phones[1].type" label="Phone 2 Type" />
|
158
|
+
<MyInput name="phones[1].number" label="Phone 2 Number" />
|
159
|
+
<MySubmitButton />
|
160
|
+
</ValidatedForm>
|
161
|
+
);
|
162
|
+
}
|
163
|
+
```
|
164
|
+
|
165
|
+
# Validation Library Support
|
166
|
+
|
167
|
+
This library currently includes an out-of-the-box adapter for `yup` and `zod`,
|
168
|
+
but you can easily support whatever library you want by creating your own adapter.
|
169
|
+
|
170
|
+
And if you create an adapter for a library, feel free to make a PR on this library to add official support 😊
|
171
|
+
|
172
|
+
## Creating an adapter
|
173
|
+
|
174
|
+
Any object that conforms to the `Validator` type can be passed into the the `ValidatedForm`'s `validator` prop.
|
175
|
+
|
176
|
+
```ts
|
177
|
+
type FieldErrors = Record<string, string>;
|
178
|
+
|
179
|
+
type ValidationResult<DataType> =
|
180
|
+
| { data: DataType; error: undefined }
|
181
|
+
| { error: FieldErrors; data: undefined };
|
182
|
+
|
183
|
+
type ValidateFieldResult = { error?: string };
|
184
|
+
|
185
|
+
type Validator<DataType> = {
|
186
|
+
validate: (unvalidatedData: unknown) => ValidationResult<DataType>;
|
187
|
+
validateField: (
|
188
|
+
unvalidatedData: unknown,
|
189
|
+
field: string
|
190
|
+
) => ValidateFieldResult;
|
191
|
+
};
|
192
|
+
```
|
193
|
+
|
194
|
+
In order to make an adapter for your validation library of choice,
|
195
|
+
you can create a function that accepts a schema from the validation library and turns it into a validator.
|
196
|
+
|
197
|
+
Note the use of `createValidator`.
|
198
|
+
It takes care of unflattening the data for nested objects and arrays
|
199
|
+
since the form doesn't know anything about object and arrays and this should be handled by the adapter.
|
200
|
+
For more on this you can check the implementations for `withZod` and `withYup`.
|
201
|
+
|
202
|
+
The out-of-the-box support for `yup` in this library works like this:
|
203
|
+
|
204
|
+
```ts
|
205
|
+
export const withYup = <Schema extends AnyObjectSchema>(
|
206
|
+
validationSchema: Schema
|
207
|
+
// For best result with Typescript, we should type the `Validator` we return based on the provided schema
|
208
|
+
): Validator<InferType<Schema>> =>
|
209
|
+
createValidator({
|
210
|
+
validate: (unvalidatedData) => {
|
211
|
+
// Validate with yup and return the validated & typed data or the error
|
212
|
+
|
213
|
+
if (isValid) return { data: { field1: "someValue" }, error: undefined };
|
214
|
+
else return { error: { field1: "Some error!" }, data: undefined };
|
215
|
+
},
|
216
|
+
validateField: (unvalidatedData, field) => {
|
217
|
+
// Validate the specific field with yup
|
218
|
+
|
219
|
+
if (isValid) return { error: undefined };
|
220
|
+
else return { error: "Some error" };
|
221
|
+
},
|
222
|
+
});
|
223
|
+
```
|
224
|
+
|
225
|
+
# Frequenty Asked Questions
|
226
|
+
|
227
|
+
## Why are my fields triggering the native HTML validations before `remix-validated-form` ones?
|
228
|
+
|
229
|
+
This is happening because you or the library you are using is passing the `required` attribute to the fields.
|
230
|
+
This library doesn't take care of eliminating them and it's up to the user how they want to manage the validation errors.
|
231
|
+
If you wan't to disable all native HTML validations you can add `noValidate` to `<ValidatedForm>`.
|
232
|
+
We recommend this approach since the validation will still work even if JS is disabled.
|
@@ -26,8 +26,20 @@ export declare type FormProps<DataType> = {
|
|
26
26
|
* A ref to the form element.
|
27
27
|
*/
|
28
28
|
formRef?: React.RefObject<HTMLFormElement>;
|
29
|
+
/**
|
30
|
+
* An optional sub-action to use for the form.
|
31
|
+
* Setting a value here will cause the form to be submitted with an extra `subaction` value.
|
32
|
+
* This can be useful when there are multiple forms on the screen handled by the same action.
|
33
|
+
*/
|
34
|
+
subaction?: string;
|
35
|
+
/**
|
36
|
+
* Reset the form to the default values after the form has been successfully submitted.
|
37
|
+
* This is useful if you want to submit the same form multiple times,
|
38
|
+
* and don't redirect in-between submissions.
|
39
|
+
*/
|
40
|
+
resetAfterSubmit?: boolean;
|
29
41
|
} & Omit<ComponentProps<typeof RemixForm>, "onSubmit">;
|
30
42
|
/**
|
31
43
|
* The primary form component of `remix-validated-form`.
|
32
44
|
*/
|
33
|
-
export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, ...rest }: FormProps<DataType>): JSX.Element;
|
45
|
+
export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, ...rest }: FormProps<DataType>): JSX.Element;
|
package/browser/ValidatedForm.js
CHANGED
@@ -1,41 +1,89 @@
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
2
|
import { Form as RemixForm, useActionData, useFormAction, useTransition, } from "@remix-run/react";
|
3
3
|
import { useEffect, useMemo, useRef, useState, } from "react";
|
4
4
|
import invariant from "tiny-invariant";
|
5
5
|
import { FormContext } from "./internal/formContext";
|
6
|
+
import { useSubmitComplete } from "./internal/submissionCallbacks";
|
6
7
|
import { omit, mergeRefs } from "./internal/util";
|
7
|
-
function
|
8
|
+
function useFieldErrorsFromBackend(fetcher, subaction) {
|
9
|
+
var _a, _b;
|
8
10
|
const actionData = useActionData();
|
9
|
-
|
10
|
-
|
11
|
-
|
11
|
+
if (fetcher)
|
12
|
+
return (_a = fetcher.data) === null || _a === void 0 ? void 0 : _a.fieldErrors;
|
13
|
+
if (!actionData)
|
14
|
+
return null;
|
15
|
+
if (actionData.fieldErrors) {
|
16
|
+
const submittedData = (_b = actionData.fieldErrors) === null || _b === void 0 ? void 0 : _b._submittedData;
|
17
|
+
const subactionsMatch = subaction
|
18
|
+
? subaction === (submittedData === null || submittedData === void 0 ? void 0 : submittedData.subaction)
|
19
|
+
: !(submittedData === null || submittedData === void 0 ? void 0 : submittedData.subaction);
|
20
|
+
return subactionsMatch ? actionData.fieldErrors : null;
|
21
|
+
}
|
22
|
+
return null;
|
23
|
+
}
|
24
|
+
function useFieldErrors(fieldErrorsFromBackend) {
|
25
|
+
const [fieldErrors, setFieldErrors] = useState(fieldErrorsFromBackend !== null && fieldErrorsFromBackend !== void 0 ? fieldErrorsFromBackend : {});
|
12
26
|
useEffect(() => {
|
13
|
-
if (
|
14
|
-
setFieldErrors(
|
15
|
-
}, [
|
27
|
+
if (fieldErrorsFromBackend)
|
28
|
+
setFieldErrors(fieldErrorsFromBackend);
|
29
|
+
}, [fieldErrorsFromBackend]);
|
16
30
|
return [fieldErrors, setFieldErrors];
|
17
31
|
}
|
18
|
-
const useIsSubmitting = (action, fetcher) => {
|
32
|
+
const useIsSubmitting = (action, subaction, fetcher) => {
|
19
33
|
const actionForCurrentPage = useFormAction();
|
20
34
|
const pendingFormSubmit = useTransition().submission;
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
35
|
+
if (fetcher)
|
36
|
+
return fetcher.state === "submitting";
|
37
|
+
if (!pendingFormSubmit)
|
38
|
+
return false;
|
39
|
+
const { formData, action: pendingAction } = pendingFormSubmit;
|
40
|
+
const pendingSubAction = formData.get("subaction");
|
41
|
+
const expectedAction = action !== null && action !== void 0 ? action : actionForCurrentPage;
|
42
|
+
if (subaction)
|
43
|
+
return expectedAction === pendingAction && subaction === pendingSubAction;
|
44
|
+
return expectedAction === pendingAction && !pendingSubAction;
|
25
45
|
};
|
26
46
|
const getDataFromForm = (el) => new FormData(el);
|
47
|
+
/**
|
48
|
+
* The purpose for this logic is to handle validation errors when javascript is disabled.
|
49
|
+
* Normally (without js), when a form is submitted and the action returns the validation errors,
|
50
|
+
* the form will be reset. The errors will be displayed on the correct fields,
|
51
|
+
* but all the values in the form will be gone. This is not good UX.
|
52
|
+
*
|
53
|
+
* To get around this, we return the submitted form data from the server,
|
54
|
+
* and use those to populate the form via `defaultValues`.
|
55
|
+
* This results in a more seamless UX akin to what you would see when js is enabled.
|
56
|
+
*
|
57
|
+
* One potential downside is that resetting the form will reset the form
|
58
|
+
* to the _new_ default values that were returned from the server with the validation errors.
|
59
|
+
* However, this case is less of a problem than the janky UX caused by losing the form values.
|
60
|
+
* It will only ever be a problem if the form includes a `<button type="reset" />`
|
61
|
+
* and only if JS is disabled.
|
62
|
+
*/
|
63
|
+
function useDefaultValues(fieldErrors, defaultValues) {
|
64
|
+
const defaultsFromValidationError = fieldErrors === null || fieldErrors === void 0 ? void 0 : fieldErrors._submittedData;
|
65
|
+
return defaultsFromValidationError !== null && defaultsFromValidationError !== void 0 ? defaultsFromValidationError : defaultValues;
|
66
|
+
}
|
27
67
|
/**
|
28
68
|
* The primary form component of `remix-validated-form`.
|
29
69
|
*/
|
30
|
-
export function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, ...rest }) {
|
70
|
+
export function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, ...rest }) {
|
31
71
|
var _a;
|
32
|
-
const
|
33
|
-
const
|
72
|
+
const fieldErrorsFromBackend = useFieldErrorsFromBackend(fetcher, subaction);
|
73
|
+
const [fieldErrors, setFieldErrors] = useFieldErrors(fieldErrorsFromBackend);
|
74
|
+
const isSubmitting = useIsSubmitting(action, subaction, fetcher);
|
75
|
+
const defaultsToUse = useDefaultValues(fieldErrorsFromBackend, defaultValues);
|
34
76
|
const formRef = useRef(null);
|
77
|
+
useSubmitComplete(isSubmitting, () => {
|
78
|
+
var _a;
|
79
|
+
if (!fieldErrorsFromBackend && resetAfterSubmit) {
|
80
|
+
(_a = formRef.current) === null || _a === void 0 ? void 0 : _a.reset();
|
81
|
+
}
|
82
|
+
});
|
35
83
|
const contextValue = useMemo(() => ({
|
36
84
|
fieldErrors,
|
37
85
|
action,
|
38
|
-
defaultValues,
|
86
|
+
defaultValues: defaultsToUse,
|
39
87
|
isSubmitting: isSubmitting !== null && isSubmitting !== void 0 ? isSubmitting : false,
|
40
88
|
clearError: (fieldName) => {
|
41
89
|
setFieldErrors((prev) => omit(prev, fieldName));
|
@@ -53,7 +101,7 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
|
|
53
101
|
}), [
|
54
102
|
fieldErrors,
|
55
103
|
action,
|
56
|
-
|
104
|
+
defaultsToUse,
|
57
105
|
isSubmitting,
|
58
106
|
setFieldErrors,
|
59
107
|
validator,
|
@@ -68,5 +116,10 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
|
|
68
116
|
else {
|
69
117
|
onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(result.data, event);
|
70
118
|
}
|
71
|
-
},
|
119
|
+
}, onReset: (event) => {
|
120
|
+
onReset === null || onReset === void 0 ? void 0 : onReset(event);
|
121
|
+
if (event.defaultPrevented)
|
122
|
+
return;
|
123
|
+
setFieldErrors({});
|
124
|
+
}, children: _jsxs(FormContext.Provider, { value: contextValue, children: [subaction && (_jsx("input", { type: "hidden", value: subaction, name: "subaction" }, void 0)), children] }, void 0) }, void 0));
|
72
125
|
}
|
package/browser/index.d.ts
CHANGED
@@ -2,7 +2,5 @@ export * from "./hooks";
|
|
2
2
|
export * from "./server";
|
3
3
|
export * from "./ValidatedForm";
|
4
4
|
export * from "./validation/types";
|
5
|
-
export * from "./validation/withYup";
|
6
|
-
export * from "./validation/withZod";
|
7
5
|
export * from "./validation/createValidator";
|
8
6
|
export type { FormContextValue } from "./internal/formContext";
|
package/browser/index.js
CHANGED
@@ -0,0 +1 @@
|
|
1
|
+
export declare function useSubmitComplete(isSubmitting: boolean, callback: () => void): void;
|
@@ -0,0 +1,13 @@
|
|
1
|
+
import { useEffect, useRef } from "react";
|
2
|
+
export function useSubmitComplete(isSubmitting, callback) {
|
3
|
+
const isPending = useRef(false);
|
4
|
+
useEffect(() => {
|
5
|
+
if (isSubmitting) {
|
6
|
+
isPending.current = true;
|
7
|
+
}
|
8
|
+
if (!isSubmitting && isPending.current) {
|
9
|
+
isPending.current = false;
|
10
|
+
callback();
|
11
|
+
}
|
12
|
+
});
|
13
|
+
}
|
@@ -13,7 +13,18 @@ const preprocessFormData = (data) => {
|
|
13
13
|
*/
|
14
14
|
export function createValidator(validator) {
|
15
15
|
return {
|
16
|
-
validate: (value) =>
|
16
|
+
validate: (value) => {
|
17
|
+
const data = preprocessFormData(value);
|
18
|
+
const result = validator.validate(data);
|
19
|
+
if (result.error) {
|
20
|
+
// Ideally, we should probably be returning a nested object like
|
21
|
+
// { fieldErrors: {}, submittedData: {} }
|
22
|
+
// We should do this in the next major version of the library
|
23
|
+
// but for now, we can sneak it in with the fieldErrors.
|
24
|
+
result.error._submittedData = data;
|
25
|
+
}
|
26
|
+
return result;
|
27
|
+
},
|
17
28
|
validateField: (data, field) => validator.validateField(preprocessFormData(data), field),
|
18
29
|
};
|
19
30
|
}
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import * as yup from "yup";
|
2
2
|
import { z } from "zod";
|
3
3
|
import { withYup } from "..";
|
4
|
+
import { objectFromPathEntries } from "../internal/flatten";
|
4
5
|
import { TestFormData } from "../test-data/testFormData";
|
5
6
|
import { withZod } from "./withZod";
|
6
7
|
const validationTestCases = [
|
@@ -78,6 +79,7 @@ describe("Validation", () => {
|
|
78
79
|
"address.country": anyString,
|
79
80
|
"address.streetAddress": anyString,
|
80
81
|
"pets[0].name": anyString,
|
82
|
+
_submittedData: obj,
|
81
83
|
},
|
82
84
|
});
|
83
85
|
});
|
@@ -119,6 +121,7 @@ describe("Validation", () => {
|
|
119
121
|
error: {
|
120
122
|
"address.city": anyString,
|
121
123
|
"pets[0].name": anyString,
|
124
|
+
_submittedData: objectFromPathEntries([...formData.entries()]),
|
122
125
|
},
|
123
126
|
});
|
124
127
|
});
|
@@ -239,6 +242,7 @@ describe("withZod", () => {
|
|
239
242
|
type: anyString,
|
240
243
|
bar: anyString,
|
241
244
|
foo: anyString,
|
245
|
+
_submittedData: obj,
|
242
246
|
},
|
243
247
|
});
|
244
248
|
});
|
@@ -257,6 +261,7 @@ describe("withZod", () => {
|
|
257
261
|
error: {
|
258
262
|
field1: anyString,
|
259
263
|
field2: anyString,
|
264
|
+
_submittedData: obj,
|
260
265
|
},
|
261
266
|
});
|
262
267
|
expect(validator.validateField(obj, "field1")).toEqual({
|
package/build/ValidatedForm.d.ts
CHANGED
@@ -26,8 +26,20 @@ export declare type FormProps<DataType> = {
|
|
26
26
|
* A ref to the form element.
|
27
27
|
*/
|
28
28
|
formRef?: React.RefObject<HTMLFormElement>;
|
29
|
+
/**
|
30
|
+
* An optional sub-action to use for the form.
|
31
|
+
* Setting a value here will cause the form to be submitted with an extra `subaction` value.
|
32
|
+
* This can be useful when there are multiple forms on the screen handled by the same action.
|
33
|
+
*/
|
34
|
+
subaction?: string;
|
35
|
+
/**
|
36
|
+
* Reset the form to the default values after the form has been successfully submitted.
|
37
|
+
* This is useful if you want to submit the same form multiple times,
|
38
|
+
* and don't redirect in-between submissions.
|
39
|
+
*/
|
40
|
+
resetAfterSubmit?: boolean;
|
29
41
|
} & Omit<ComponentProps<typeof RemixForm>, "onSubmit">;
|
30
42
|
/**
|
31
43
|
* The primary form component of `remix-validated-form`.
|
32
44
|
*/
|
33
|
-
export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, ...rest }: FormProps<DataType>): JSX.Element;
|
45
|
+
export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, ...rest }: FormProps<DataType>): JSX.Element;
|