Skip to content

Commit ba33aa5

Browse files
committed
chore: Add Remix Submission Handler Example to Documentation
1 parent e0646f3 commit ba33aa5

File tree

1 file changed

+44
-0
lines changed

1 file changed

+44
-0
lines changed

docs/form-validity-observer/guides.md

+44
Original file line numberDiff line numberDiff line change
@@ -556,6 +556,50 @@ In the end, it's up to you to decide how you want to handle these trade-offs. Th
556556
557557
There is potential for a third option that would allow you to pull benefits from both of the approaches shown above. However, that third option would also pull _drawbacks_ from both of those approaches. (We can never avoid the difficulties of making real trade-offs.) If you're interested in that third option being supported, feel free to comment on [this issue](https://github.com/enthusiastic-js/form-observer/issues/7).
558558
559+
### The `submit` Event Handler
560+
561+
If you want to know how to write a submission handler that includes form validation for the `Remix` examples listed above, the process is very simple.
562+
563+
If all of your form fields are validated _synchronously_, then the handler is very easy to write:
564+
565+
```ts
566+
const handleSubmit = (event: React.FormEvent) => (validateFields({ focus: true }) ? undefined : event.preventDefault());
567+
```
568+
569+
If _any_ of your form fields are validated _asynchronously_ then `Remix` will require a little more effort from your event handler. **The following will not work** because `event.preventDefault()` won't be called until _after_ `Remix` has already submitted the form.
570+
571+
```ts
572+
const handleSubmit = async (event: React.FormEvent) => {
573+
const success = await validateFields({ focus: true });
574+
if (!success) event.preventDefault();
575+
};
576+
```
577+
578+
Instead, we need to leverage `Remix`'s [`submit`](https://remix.run/docs/en/main/hooks/use-submit) function like so:
579+
580+
```ts
581+
import { Form, useActionData, useSubmit } from "@remix-run/react";
582+
import type { FormMethod } from "@remix-run/react";
583+
// Other imports ...
584+
585+
export default function SignupForm() {
586+
// Other Code ...
587+
588+
const submit = useSubmit();
589+
const handleSubmit = async (event: React.FormEvent) => {
590+
event.preventDefault();
591+
const form = event.target as HTMLFormElement;
592+
593+
const success = await validateFields({ focus: true });
594+
if (success) return submit(form, { method: form.method as FormMethod });
595+
};
596+
597+
// Returnd JSX ...
598+
}
599+
```
600+
601+
Note that you might want to memoize your submission handler with [`useCallback`](https://react.dev/reference/react/useCallback) to prevent `Remix`'s `<Form>` component from re-rendering unnecessarily. Whether or not you choose to do this is up to you, however.
602+
559603
## Keeping Track of Form Data
560604
561605
Many form libraries offer stateful solutions for managing the data in your forms as JSON. But there are a few disadvantages to this approach:

0 commit comments

Comments
 (0)