remix-validated-form 4.6.10 → 4.6.12
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/README.md +27 -30
- package/dist/index.cjs.js +3 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +5 -5
- package/dist/index.esm.js +3 -1
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/internal/getInputProps.ts +5 -5
- package/src/internal/hooks.ts +4 -1
package/README.md
CHANGED
@@ -2,25 +2,27 @@
|
|
2
2
|
|
3
3
|
A form library built for [Remix](https://remix.run) to make validation easy.
|
4
4
|
|
5
|
+
## Features
|
6
|
+
|
5
7
|
- Client-side, field-by-field and form-level validation
|
6
8
|
- Re-use validation on the server
|
7
9
|
- Set default values for the entire form in one place
|
8
10
|
- Supports nested objects and arrays
|
9
|
-
- Easily detect if a specific form is being
|
11
|
+
- Easily detect if a specific form is being submitted
|
10
12
|
- Validation library agnostic
|
11
13
|
- Can work without JS
|
12
14
|
|
13
|
-
|
15
|
+
## Docs
|
14
16
|
|
15
17
|
The docs are located a [remix-validated-form.io](https://www.remix-validated-form.io).
|
16
18
|
|
17
|
-
|
19
|
+
## Demo
|
18
20
|
|
19
21
|
https://user-images.githubusercontent.com/2811287/145734901-700a5085-a10b-4d89-88e1-5de9142b1e85.mov
|
20
22
|
|
21
23
|
To run `sample-app`:
|
22
24
|
|
23
|
-
```
|
25
|
+
```bash
|
24
26
|
git clone https://github.com/airjp73/remix-validated-form
|
25
27
|
cd ./remix-validated-form
|
26
28
|
yarn install
|
@@ -28,21 +30,20 @@ yarn build
|
|
28
30
|
yarn sample-app
|
29
31
|
```
|
30
32
|
|
31
|
-
|
33
|
+
## Getting started
|
32
34
|
|
33
|
-
|
35
|
+
### Install
|
34
36
|
|
35
|
-
|
37
|
+
#### Base package
|
36
38
|
|
37
39
|
```bash
|
38
40
|
npm install remix-validated-form
|
39
41
|
```
|
40
42
|
|
41
|
-
|
43
|
+
#### Validation library adapter
|
42
44
|
|
43
45
|
There are official adapters available for `zod` and `yup`.
|
44
|
-
If you're using a different library,
|
45
|
-
see the [Validation library support](#validation-library-support) section below.
|
46
|
+
If you're using a different library, see the [Validation library support](#validation-library-support) section below.
|
46
47
|
|
47
48
|
- @remix-validated-form/with-zod
|
48
49
|
- @remix-validated-form/with-yup
|
@@ -53,10 +54,9 @@ npm install @remix-validated-form/with-zod
|
|
53
54
|
|
54
55
|
If you're using zod, you might also find `zod-form-data` helpful.
|
55
56
|
|
56
|
-
|
57
|
+
### Create an input component
|
57
58
|
|
58
|
-
In order to display field errors or do field-by-field validation,
|
59
|
-
it's recommended to incorporate this library into an input component using `useField`.
|
59
|
+
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`.
|
60
60
|
|
61
61
|
```tsx
|
62
62
|
import { useField } from "remix-validated-form";
|
@@ -78,7 +78,7 @@ export const MyInput = ({ name, label }: MyInputProps) => {
|
|
78
78
|
};
|
79
79
|
```
|
80
80
|
|
81
|
-
|
81
|
+
### Create a submit button component
|
82
82
|
|
83
83
|
To best take advantage of the per-form submission detection, we can create a submit button component.
|
84
84
|
|
@@ -102,9 +102,9 @@ export const MySubmitButton = () => {
|
|
102
102
|
};
|
103
103
|
```
|
104
104
|
|
105
|
-
|
105
|
+
### Using the form
|
106
106
|
|
107
|
-
Now that we have our components, making a form is easy
|
107
|
+
Now that we have our components, making a form is easy.
|
108
108
|
|
109
109
|
```tsx
|
110
110
|
import { DataFunctionArgs, json, redirect } from "@remix-run/node";
|
@@ -159,7 +159,7 @@ export default function MyForm() {
|
|
159
159
|
}
|
160
160
|
```
|
161
161
|
|
162
|
-
|
162
|
+
### Nested objects and arrays
|
163
163
|
|
164
164
|
You can use nested objects and arrays by using a period (`.`) or brackets (`[]`) for the field names.
|
165
165
|
|
@@ -186,14 +186,13 @@ export default function MyForm() {
|
|
186
186
|
}
|
187
187
|
```
|
188
188
|
|
189
|
-
|
189
|
+
## Validation Library Support
|
190
190
|
|
191
|
-
There are official adapters available for `zod` and `yup` ,
|
192
|
-
but you can easily support whatever library you want by creating your own adapter.
|
191
|
+
There are official adapters available for `zod` and `yup` , but you can easily support whatever library you want by creating your own adapter.
|
193
192
|
|
194
193
|
And if you create an adapter for a library, feel free to make a PR on this repository 😊
|
195
194
|
|
196
|
-
|
195
|
+
### Creating an adapter
|
197
196
|
|
198
197
|
Any object that conforms to the `Validator` type can be passed into the the `ValidatedForm`'s `validator` prop.
|
199
198
|
|
@@ -215,15 +214,13 @@ type Validator<DataType> = {
|
|
215
214
|
};
|
216
215
|
```
|
217
216
|
|
218
|
-
In order to make an adapter for your validation library of choice,
|
219
|
-
you can create a function that accepts a schema from the validation library and turns it into a validator.
|
217
|
+
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.
|
220
218
|
|
221
219
|
Note the use of `createValidator`.
|
222
|
-
It takes care of unflattening the data for nested objects and arrays
|
223
|
-
since the form doesn't know anything about object and arrays and this should be handled by the adapter.
|
220
|
+
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.
|
224
221
|
For more on this you can check the implementations for `withZod` and `withYup`.
|
225
222
|
|
226
|
-
The out-of-the-box support for `yup` in this library works
|
223
|
+
The out-of-the-box support for `yup` in this library works as the following:
|
227
224
|
|
228
225
|
```ts
|
229
226
|
export const withYup = <Schema extends AnyObjectSchema>(
|
@@ -246,21 +243,21 @@ export const withYup = <Schema extends AnyObjectSchema>(
|
|
246
243
|
});
|
247
244
|
```
|
248
245
|
|
249
|
-
|
246
|
+
## Frequenty Asked Questions
|
250
247
|
|
251
|
-
|
248
|
+
### Why are my fields triggering the native HTML validations before `remix-validated-form` ones?
|
252
249
|
|
253
250
|
This is happening because you or the library you are using is passing the `required` attribute to the fields.
|
254
251
|
This library doesn't take care of eliminating them and it's up to the user how they want to manage the validation errors.
|
255
252
|
If you wan't to disable all native HTML validations you can add `noValidate` to `<ValidatedForm>`.
|
256
253
|
We recommend this approach since the validation will still work even if JS is disabled.
|
257
254
|
|
258
|
-
|
255
|
+
### How do we trigger toast messages on success?
|
259
256
|
|
260
257
|
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
|
261
258
|
See the [Remix](https://remix.run/docs/en/v1/utils/sessions#sessionflashkey-value) documentation for more information.
|
262
259
|
|
263
|
-
|
260
|
+
### Why is my cancel button triggering form submission?
|
264
261
|
|
265
262
|
Problem: the cancel button has an onClick handler to navigate away from the form route but instead it is submitting the form.
|
266
263
|
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.
|
package/dist/index.cjs.js
CHANGED
@@ -1073,7 +1073,9 @@ var useDefaultValuesFromLoader = ({
|
|
1073
1073
|
const matches = (0, import_react2.useMatches)();
|
1074
1074
|
if (typeof formId === "string") {
|
1075
1075
|
const dataKey = formDefaultValuesKey(formId);
|
1076
|
-
const match = matches.reverse().find(
|
1076
|
+
const match = matches.reverse().find(
|
1077
|
+
(match2) => match2.data && typeof match2.data === "object" && dataKey in match2.data
|
1078
|
+
);
|
1077
1079
|
return match == null ? void 0 : match.data[dataKey];
|
1078
1080
|
}
|
1079
1081
|
return null;
|