T
TanStack•5mo ago
afraid-scarlet

Validating a form with sections

Hi I'd like to make a form that has sections (so the overall data structure is smth like 
type FormData = {
    key_1: DataForKey1;
    key_2: DataForKey2;
    key_3: DataForKey3;
...
};
type FormData = {
    key_1: DataForKey1;
    key_2: DataForKey2;
    key_3: DataForKey3;
...
};
And each section can be enabled / disabled. In the case it is disabled - the form should not validate the fields for said section. What would be the best way to approach that?
10 Replies
yammering-amber
yammering-amber•5mo ago
go for form validation rather than field validation in the validation function, always check for the disabled property before continuing with validation of that section. You can set field level errors from the form validators, so you wouldn‘t lose the ability to display field errors at their location. Do you use a validation library? Or do you write it yourself? do you use any validation
afraid-scarlet
afraid-scarletOP•5mo ago
I was planning to use arktype, currently debating wether it will be easier to make a co.posable type or validate each section separately A question about that: arktype provides transform capabilities alongside validation - can I integrate those in tanstack/form as well?
yammering-amber
yammering-amber•5mo ago
as long as it implements standard schema, it should be compatible. Note that tanstack form only utilizes the input type. This means that you can use transforms for validation just fine, but in the form's onSubmit, you will have to parse it once more to actually get the transformed output type.
yammering-amber
yammering-amber•5mo ago
https://arktype.io/docs/integrations#standard-schema looks like arktype supports standard schema! You should be good to go!
ArkType
ArkType Docs
TypeScript's 1:1 validator, optimized from editor to runtime
afraid-scarlet
afraid-scarletOP•5mo ago
So, smth like 
({ value }) => {
for (const [section, { enabled, schema }] of section_definitions) {
   If (!enabled) continue;
   const res = schema(value[section]) // do smth with the errors
}
}
({ value }) => {
for (const [section, { enabled, schema }] of section_definitions) {
   If (!enabled) continue;
   const res = schema(value[section]) // do smth with the errors
}
}
as the validation function should suffice, right? And then probably combine all the errors in an object Or would it be easier to use standard schema entrypoints, rather than the "default" arktype way of calling
yammering-amber
yammering-amber•5mo ago
depends on if arktype evaluates properties before passing it to transform since it can error before even reaching it I only use zod, so I don't really know how arktype works :Sadge:
afraid-scarlet
afraid-scarletOP•5mo ago
Gotcha I guess I can also "implement" standard schema for the validator and treat my object as a wrapper for specific section validations
yammering-amber
yammering-amber•5mo ago
well, as said, arktype supports it. So any arktype schema you write is automatically a standard schema
afraid-scarlet
afraid-scarletOP•5mo ago
Because, just to be sure - anything I return from a validator fn is treated as errors and passed to form / field errors? So, If I return an object like { fields: { [K in SectionTypes]: errors_from_arktype } } It will all propagate properly, assuming errors_from_arktype has appropriate structure
yammering-amber
yammering-amber•5mo ago
yes. Note that it's not nested objects for routes. Example: 
- {
-   fields: {
-     personData: {
-       name: [ 'Invalid name' ]
-     }
-   }
- }

+ {
+   fields: {
+     'personData.name': [ 'Invalid name' ]
+   }
+ }
- {
-   fields: {
-     personData: {
-       name: [ 'Invalid name' ]
-     }
-   }
- }

+ {
+   fields: {
+     'personData.name': [ 'Invalid name' ]
+   }
+ }

Did you find this page helpful?