united-yellow

Sub form separate submit/validation

I basically have a multi-page form and I believe using withForm would be a perfect addition for this feature. I'm looking to maintain one form with specific validators for each page. One page might build upon data from another. E.g. page 1 should validate title and list of friends E.g. page 2 should validate each friend has a correct phone number Is this possible with sub-forms? Or should I look into something different? Just a note: I plan to use zod

17 Replies

united-yellowOP•5mo ago

Something that I kinda got working is like this

const checks = await Promise.all(
      selectFields.map((f) => form.validateField(f, 'submit'))
    );

const checks = await Promise.all(
      selectFields.map((f) => form.validateField(f, 'submit'))
    );

selectFields is a specific group of fields i want to validate. And from there I make sure that they are all empty. I turn on/off the button if there are errors in those select fields. Is there a better way to do this? Or is this ideal

grumpy-cyan•5mo ago

What connects the subforms apart from the data they consume? if they have different validation, fields and submit behaviour, then it sounds like they should just be separate forms

united-yellowOP•5mo ago

Well one example like I mentioned is you have a list of people for example and then you can add a list of things to each person. But you can also go back and remove a person and the list of things for that person should be gone when you go back. Also just the fact that right now the form disappears when you go back when I want it to be editable still

grumpy-cyan•5mo ago

I see. Yes, this is doable with withForm. Since you'll use zod schemas, I recommend you create a form-level schema instead of a field level one so you can find it more easily. There's a helper function to generate common parameters (formOptions()) which you can pass between withForms

united-yellowOP•5mo ago

Yea I’ve seen that, im just wondering if there’s a better way to run validation on certain fields only This works for me right now this code I sent but not sure if it’s optimal Definitely need to use form options though lol

grumpy-cyan•5mo ago

hmm … how do you determine the specific fields?

united-yellowOP•5mo ago

Well A list basically

grumpy-cyan•5mo ago

a boolean?

united-yellowOP•5mo ago

I have a list of fields I want to validate for a certain page selectFields would be constant I wonder if I can abstract it into a button which takes an on submit and list of fields

grumpy-cyan•5mo ago

hmmm … this could be tricky. Can‘t think of a simpler solution for now, but if you‘re willing to share a small example (on stackblitz f. e.), I‘d be happy to help tinker with it

united-yellowOP•5mo ago

Sure I can do that. I’m a bit busy but I will get around to this so I appreciate your help do you know what the type of a key is in the form? so i can try to generalize this

grumpy-cyan•5mo ago

DeepKeys<TFormData> TFormData is the values you passed to defaultValues

united-yellowOP•5mo ago

Can I actually import TFormData from anywhere as a generic? from the form perhaps?

grumpy-cyan•5mo ago

Considering it‘s a generic, not unless you accept the form as a parameter but you can just access the place where the form got the type from

united-yellowOP•5mo ago

Well basically what I want a button that accepts deep keys of a certain form, this button will validate all of those fields on click, disable if any of those fields have errors, and have a onSubmit callback for success available passing in the form would be fine for me When I use the form context it shows the key as never

grumpy-cyan•5mo ago

withForm is the recommended way to create a form prop element even if it just has a button in it

united-yellowOP•5mo ago

ah i see, i was following the subscribe button example ok let me try that and i'll report my results

Gaming

Programming

Sub form separate submit/validation

Did you find this page helpful?