Comments (6)
@gustavoguichard I will try to implement your ideas of either fetching the token in the background or as a part of the loader to the page.
I'll update this issue with my findings.
from remix-forms.
Since the function to fetch the token comes from a hook I decided to add a useEffect which updates a hidden field in the form. That works fine for me.
This issue can be closed from my side.
from remix-forms.
Hey, @sndrem!
First, it is weird that your custom onSubmit is only being called when there are no children to Form. I tested it in the sandbox and was able to reproduce it. I couldn't understand why just by reading the code. The desired behavior is for you to have control over onSubmit regardless of whether you pass children or not.
That said, I don't recommend customizing onSubmit unless you really need it. In your example, you're losing the client-side validations from react-hook-form and would have to reimplement it manually.
About using the submit
function, it is intended to be used for triggering manual submits, not reacting to user submits.
Can you tell us more about your specific use case so we can try to help find the right API to use?
I'll keep this issue open until we fix the bug that doesn't allow custom onSubmit when the form has children.
from remix-forms.
Sure @danielweinmann
My use case is that I need to fetch a token from Googles Recaptcha before submitting the form.
const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
event.preventDefault();
// I need to fetch a token from the executeRecaptcha function just before submitting the form
const token = await executeRecaptcha?.();
if (token) {
const formData = new FormData(event.target as HTMLFormElement);
// I need to add the token to the formdata so that I can access it in the action and then do a fetch call to Google to verify
// if the submitter is a human or a bot
formData.set("token", token);
submit(formData, { method: "post", encType: "multipart/form-data" });
}
};
I am not sure how to do this other wise. It has worked fine for the past year, but when upgrading now, it fails.
I might be able to execute the executeRecaptcha
function in a useEffect
and it to a hidden form field right away, but I have not tried that yet. Not sure if the token lasts long enough if the user navigates to the form, then waits a long enough time before submitting.
from remix-forms.
@sndrem , by looking at your code sample I wonder if you could be executing the recaptcha in the background and adding its token to a hidden input in the form instead of customizing the onSubmit? Going even further: can't you load the token in a loader and have it ready by the time the form is mounted?
from remix-forms.
@sndrem I'm glad it worked for you :)
from remix-forms.
Related Issues (20)
- Custom Component typings HOT 2
- Error: Cannot submit element that is not <form>, <button>, or <input type="submit|image"> HOT 1
- Multiple Checkboxes HOT 3
- Define Input type through fieldTypes HOT 5
- Bring `errorMessagesForSchema` from `domain-functions` to this library HOT 1
- form with mode="onChange" button flashes when it hydrates HOT 2
- Could not resolve "@deepkit/type" HOT 3
- Overriding fields HOT 2
- <Field hidden /> is not passing `type="hidden"` to its input
- Validation error not shown when field is an array
- Handle `z.object` HOT 1
- Can remix-forms function within a PWA / client side only context? HOT 4
- Zod schema array of objects HOT 1
- Remix forms site example no longer maintained? HOT 1
- [BUG] Field error(s) not showing if using additional component HOT 1
- Input ID's not always unique when multiple forms are rendered
- Example of how to do crud correctly?
- How to add a reset button on the side of the submit button? HOT 1
- domain-functions deprecated, are you planing to update remix-forms docs HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from remix-forms.