You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: docs/form-validity-observer/guides.md
+44
Original file line number
Diff line number
Diff 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
556
556
557
557
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).
558
558
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:
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.
if (success) returnsubmit(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
+
559
603
## Keeping Track of Form Data
560
604
561
605
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