Comments (14)
Maaaybe this? (Sorry, it's not very clean and I'm not sure at all)
import { safeParse, safeParseAsync } from 'valibot'
import type { BaseIssue, BaseSchema, BaseSchemaAsync } from 'valibot'
import type { Validator } from '@tanstack/form-core'
type Params = {
errorMap?: (
errors: [BaseIssue<unknown>, ...BaseIssue<unknown>[]],
) => BaseIssue<unknown>
}
type validateValue = { value: unknown }
type validateFn =
| BaseSchema<unknown, unknown, BaseIssue<unknown>>
| BaseSchemaAsync<unknown, unknown, BaseIssue<unknown>>
export const valibotValidator = ((params: Params = {}) => {
return {
validate({ value }: validateValue, fn: validateFn) {
if (fn.async) return
const result = safeParse(fn, value)
if (result.success) return
if (params.errorMap) {
return params.errorMap(result.issues)
}
return result.issues.map((i) => i.message).join(', ')
},
async validateAsync({ value }: validateValue, fn: validateFn) {
const result = await safeParseAsync(fn, value)
if (result.success) return
if (params.errorMap) {
return params.errorMap(result.issues)
}
return result.issues.map((i) => i.message).join(', ')
},
}
}) as Validator<
unknown,
| BaseSchema<unknown, unknown, BaseIssue<unknown>>
| BaseSchemaAsync<unknown, unknown, BaseIssue<unknown>>
> &
((
params: Params,
) => Validator<
unknown,
| BaseSchema<unknown, unknown, BaseIssue<unknown>>
| BaseSchemaAsync<unknown, unknown, BaseIssue<unknown>>
>)
from form.
I quickly passed by here and was seeing something like this, it probably doesn't work and I don't have time to test/research in depth but maybe it will help:
import { safeParse, safeParseAsync } from 'valibot'
import type { BaseIssue, BaseSchema, BaseSchemaAsync } from 'valibot'
import type { Validator } from '@tanstack/form-core'
type Params = {
errorMap?: (
errors: [BaseIssue<unknown>, ...BaseIssue<unknown>[]],
) => BaseIssue<unknown>
}
export const valibotValidator = (params: Params) =>
(() => {
return {
validate({ value }, fn) {
if (fn.async) return
const result = safeParse(fn, value)
if (result.success) return
if (params.errorMap) {
return params.errorMap(result.issues)
}
return result.issues.map((i) => i.message).join(', ')
},
async validateAsync({ value }, fn) {
const result = await safeParseAsync(fn, value)
if (result.success) return
if (params.errorMap) {
return params.errorMap(result.issues)
}
return result.issues.map((i) => i.message).join(', ')
},
}
}) as Validator<
unknown,
| BaseSchema<unknown, unknown, BaseIssue<unknown>>
| BaseSchemaAsync<unknown, unknown, BaseIssue<unknown>>
>
from form.
I'm sorry for my slow understanding.
The current type of
validatorAdapter
:export type Validator<Type, Fn = unknown> = () => { validate(options: { value: Type; }, fn: Fn): ValidationError; validateAsync(options: { value: Type; }, fn: Fn): Promise<ValidationError>; };But if i use
valibotValidator
like this with @t-rosa 's codevalidatorAdapter: valibotValidator({ errorMap: (errors) => errors[0] }),valibotValidator return just
{ validate({ value }: validateValue, fn: validateFn) { if (fn.async) return const result = safeParse(fn, value) if (result.success) return if (params.errorMap) { return params.errorMap(result.issues) } return result.issues.map((i) => i.message).join(', ') }, async validateAsync({ value }: validateValue, fn: validateFn) { const result = await safeParseAsync(fn, value) if (result.success) return if (params.errorMap) { return params.errorMap(result.issues) } return result.issues.map((i) => i.message).join(', ') }, }Not function, just object.
So the types don't match. How can this be solved?
Yes, you're right.
I think we should use the first version, even if it's a mini breaking change. as crutchcorn said it shouldn't be a problem :)
So this one maybe the best option:
import { safeParse, safeParseAsync } from 'valibot'
import type { BaseIssue, BaseSchema, BaseSchemaAsync } from 'valibot'
import type { Validator } from '@tanstack/form-core'
type Params = {
errorMap?: (
errors: [BaseIssue<unknown>, ...BaseIssue<unknown>[]],
) => BaseIssue<unknown>
}
export const valibotValidator = (params: Params = {}) =>
(() => {
return {
validate({ value }, fn) {
if (fn.async) return
const result = safeParse(fn, value)
if (result.success) return
if (params.errorMap) {
return params.errorMap(result.issues)
}
return result.issues.map((i) => i.message).join(', ')
},
async validateAsync({ value }, fn) {
const result = await safeParseAsync(fn, value)
if (result.success) return
if (params.errorMap) {
return params.errorMap(result.issues)
}
return result.issues.map((i) => i.message).join(', ')
},
}
}) as Validator<
unknown,
| BaseSchema<unknown, unknown, BaseIssue<unknown>>
| BaseSchemaAsync<unknown, unknown, BaseIssue<unknown>>
>
from form.
This should be done at the validator level where you can pass transformErrors
to transformErrors: errors => errors[0]
rather than transformErrors: errors => errors.join(', ')
Will mark this as "Good first issue" and a feature request
from form.
@crutchcorn Hello, can I work on this issue? If possible, please assign it to me. 😊
from form.
Not sure if this is relevant to this issue or if I should create a separate one but being able to return an array from
validators={{
onChange: ["err1", "err2"] // string | string[]
}}
instead of having to return a single .join("\n")
ed string would be a very nice addition as well.
from form.
@jessekelly881 let's open a different issue on it :)
@seobbang PRs welcome! No need to assign it out, but do feel free to tackle the issue :)
from form.
Would love this fixed @seobbang did you manage to work on this?
from form.
@TheKnightCoder I'm going to try again 🤗
from form.
It would be nice to accept ValidatonError[]
as return value for FieldValidateOrFn
since there could be some cases when we want all errors to be shown from a single validation.
For example, when setting password we may want to show multiple errors under the input like 'length should be longer than 8', 'should contain special characters', ...
from form.
@t-rosa @crutchcorn
I have a question.
According to what you(@t-rosa ) suggested, when valibotValidator
is used in useForm
it can be used like:
validatorAdapter: valibotValidator({errorMap: errors => errors[0]}),
But the problem is that even if I want to use the default value, I have to use it with function call:
validatorAdapter: valibotValidator(),
But because we've been used like:
validatorAdapter: valibotValidator,
it's going to be a problem for people who are already using this validator.
So, should I make another validator, for example, valibotValidatorWithOption`?
Please tell me if I'm wrong or if there's any other way.
Thank you for your help
from form.
@t-rosa this looks awesome! Let's move forward with it in a PR :)
@seobbang this WILL be a breaking change, but a very minor one. We're prior to 1.0 so that shouldn't be a problem
from form.
I'm sorry for my slow understanding.
The current type of validatorAdapter
:
export type Validator<Type, Fn = unknown> = () => {
validate(options: {
value: Type;
}, fn: Fn): ValidationError;
validateAsync(options: {
value: Type;
}, fn: Fn): Promise<ValidationError>;
};
But if i use valibotValidator
like this with @t-rosa 's code
validatorAdapter: valibotValidator({ errorMap: (errors) => errors[0] }),
valibotValidator return just
{
validate({ value }: validateValue, fn: validateFn) {
if (fn.async) return
const result = safeParse(fn, value)
if (result.success) return
if (params.errorMap) {
return params.errorMap(result.issues)
}
return result.issues.map((i) => i.message).join(', ')
},
async validateAsync({ value }: validateValue, fn: validateFn) {
const result = await safeParseAsync(fn, value)
if (result.success) return
if (params.errorMap) {
return params.errorMap(result.issues)
}
return result.issues.map((i) => i.message).join(', ')
},
}
Not function, just object.
So the types don't match.
How can this be solved?
from form.
It should be ok for valibot, the PR is open, we should be able to do the same for the other validators
from form.
Related Issues (20)
- [DOCS]: Get the Lit Docs To Be On Par With The React Documentation
- [DOCS]: Get the Solidjs Docs To Be On Par With The React Documentation
- [DOCS]: Rewrite The Reference Docs For Users HOT 2
- [FEATURE]: Get SSR working with Nuxt.js HOT 1
- [FEATURE]: Get SSR working with Analog HOT 1
- [FEATURE]: Get SSR working with Solid Start HOT 2
- [FEATURE]: Get SSR working with TanStack Start HOT 3
- [FEATURE]: Get SSR working with Remix
- form is throwing an error in react native HOT 2
- Default value differs from pushValue HOT 5
- Migrate `serverValidate` from `@tanstack/form/next` to throw when errors occur
- Request to add comparison with Formiy form engine
- allow to reset form with new values HOT 1
- Add an API to set errors HOT 2
- Missing nested object values when using React StrictMode and `pushValue` HOT 2
- `ci.yml` uses `codecov/codecov-action@v3`, which uses a `deprecated` version of `Node.js` HOT 1
- Update `initialFormState` in SSR/Next.js example
- CI has a lot (~20) of warnings about unnecessary `await` expressions HOT 2
- stackblitz example on landing page has typescript type errors HOT 1
- When you render `Field` conditionally first rendered field will override all next rendered fields HOT 2
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 form.