Skip to content

Commit

Permalink
docs: mention standard schema
Browse files Browse the repository at this point in the history
  • Loading branch information
Balastrong committed Nov 18, 2024
1 parent 0ffa635 commit f6e677b
Show file tree
Hide file tree
Showing 5 changed files with 172 additions and 40 deletions.
57 changes: 48 additions & 9 deletions docs/framework/angular/guides/validation.md
Original file line number Diff line number Diff line change
Expand Up @@ -382,18 +382,57 @@ This will debounce every async call with a 500ms delay. You can even override th

> This will run `onChangeAsync` every 1500ms while `onBlurAsync` will run every 500ms.
## Adapter-Based Validation (Zod, Yup, Valibot)
## Validation through Schema Libraries

While functions provide more flexibility and customization over your validation, they can be a bit verbose. To help solve this, there are libraries like [Valibot](https://valibot.dev/), [Yup](https://github.com/jquense/yup), and [Zod](https://zod.dev/) that provide schema-based validation to make shorthand and type-strict validation substantially easier.
While functions provide more flexibility and customization over your validation, they can be a bit verbose. To help solve this, there are libraries that provide schema-based validation to make shorthand and type-strict validation substantially easier.

Luckily, we support all of these libraries through official adapters:
### Standard Schema Libraries

TanStack Form natively supports all libraries following the [Standard Schema specification](https://github.com/standard-schema/standard-schema), most notably:
- [Valibot](https://valibot.dev/)
- [ArkType](https://arktype.io/)

To use schemas from these libraries you can simply pass them to the `validators` props as you would do with a custom function:

```angular-ts
import { z } from 'zod'
@Component({
selector: 'app-root',
standalone: true,
imports: [TanStackField],
template: `
<ng-container
[tanstackField]="form"
name="age"
[validators]="{
onChange: z.number().gte(13, 'You must be 13 to make an account'),
}"
#age="field"
>
<!-- ... -->
</ng-container>
`,
})
export class AppComponent {
form = injectForm({
// ...
})
z = z
// ...
}
```

### Other Schema Libraries (Zod, Yup)

We also support other libraries, [Zod](https://zod.dev/) and [Yup](https://github.com/jquense/yup) through an official adapter:

```bash
$ npm install @tanstack/zod-form-adapter zod
# or
$ npm install @tanstack/yup-form-adapter yup
# or
$ npm install @tanstack/valibot-form-adapter valibot
```

Once done, we can add the adapter to the `validator` property on the form or field:
Expand Down Expand Up @@ -469,18 +508,18 @@ export class AppComponent {
}
```

### Form Level Adapter Validation
### Form Level Schema Validation

You can also use the adapter at the form level:
You can also use a Standard Schema or an adapter at the form level:

```typescript
import { zodValidator } from '@tanstack/zod-form-adapter'
import { zodValidator } from '@tanstack/zod-form-adapter' // Not required for Standard Schema libraries
import { z } from 'zod'

// ...

const form = injectForm({
validatorAdapter: zodValidator(),
validatorAdapter: zodValidator(), // Not required for Standard Schema libraries
validators: {
onChange: z.object({
age: z.number().gte(13, 'You must be 13 to make an account'),
Expand Down
6 changes: 3 additions & 3 deletions docs/framework/react/guides/ssr.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ This section focuses on integrating TanStack Form with TanStack Start.

- Start a new `TanStack Start` project, following the steps in the [TanStack Start Quickstart Guide](https://tanstack.com/router/latest/docs/framework/react/guide/tanstack-start)
- Install `@tanstack/react-form`
- Install any [form validator](/form/latest/docs/framework/react/guides/validation#adapter-based-validation-zod-yup-valibot) of your choice. [Optional]
- Install any [form validator](/form/latest/docs/framework/react/guides/validation#validation-through-schema-libraries) of your choice. [Optional]

### Start integration

Expand Down Expand Up @@ -169,7 +169,7 @@ This section focuses on integrating TanStack Form with `Next.js`, particularly u

- Start a new `Next.js` project, following the steps in the [Next.js Documentation](https://nextjs.org/docs/getting-started/installation). Ensure you select `yes` for `Would you like to use App Router?` during the setup to access all new features provided by Next.js.
- Install `@tanstack/react-form`
- Install any [form validator](/form/latest/docs/framework/react/guides/validation#adapter-based-validation-zod-yup-valibot) of your choice. [Optional]
- Install any [form validator](/form/latest/docs/framework/react/guides/validation#validation-through-schema-libraries) of your choice. [Optional]

## App Router integration

Expand Down Expand Up @@ -315,7 +315,7 @@ Here, we're using [React's `useActionState` hook](https://unicorn-utterances.com
- Start a new `Remix` project, following the steps in the [Remix Documentation](https://remix.run/docs/en/main/start/quickstart).
- Install `@tanstack/react-form`
- Install any [form validator](/form/latest/docs/framework/react/guides/validation#adapter-based-validation-zod-yup-valibot) of your choice. [Optional]
- Install any [form validator](/form/latest/docs/framework/react/guides/validation#validation-through-schema-libraries) of your choice. [Optional]
## Remix integration
Expand Down
48 changes: 39 additions & 9 deletions docs/framework/react/guides/validation.md
Original file line number Diff line number Diff line change
Expand Up @@ -413,18 +413,48 @@ This will debounce every async call with a 500ms delay. You can even override th
> This will run `onChangeAsync` every 1500ms while `onBlurAsync` will run every 500ms.
## Adapter-Based Validation (Zod, Yup, Valibot)
## Validation through Schema Libraries
While functions provide more flexibility and customization over your validation, they can be a bit verbose. To help solve this, there are libraries like [Valibot](https://valibot.dev/), [Yup](https://github.com/jquense/yup), and [Zod](https://zod.dev/) that provide schema-based validation to make shorthand and type-strict validation substantially easier.
While functions provide more flexibility and customization over your validation, they can be a bit verbose. To help solve this, there are libraries that provide schema-based validation to make shorthand and type-strict validation substantially easier.
Luckily, we support all of these libraries through official adapters:
### Standard Schema Libraries
TanStack Form natively supports all libraries following the [Standard Schema specification](https://github.com/standard-schema/standard-schema), most notably:
- [Valibot](https://valibot.dev/)
- [ArkType](https://arktype.io/)
To use schemas from these libraries you can simply pass them to the `validators` props as you would do with a custom function:
```tsx
import { z } from 'zod'
// ...
const form = useForm({
// ...
})
<form.Field
name="age"
validatorAdapter={zodValidator()}
validators={{
onChange: z.number().gte(13, 'You must be 13 to make an account'),
}}
children={(field) => {
return <>{/* ... */}</>
}}
/>
```
### Other Schema Libraries (Zod, Yup)
We also support other libraries, [Zod](https://zod.dev/) and [Yup](https://github.com/jquense/yup) through an official adapter:
```bash
$ npm install @tanstack/zod-form-adapter zod
# or
$ npm install @tanstack/yup-form-adapter yup
# or
$ npm install @tanstack/valibot-form-adapter valibot
```
Once done, we can add the adapter to the `validator` property on the form or field:
Expand Down Expand Up @@ -477,12 +507,12 @@ These adapters also support async operations using the proper property names:
/>
```
### Form Level Adapter Validation
### Form Level Schema Validation
You can also use the adapter at the form level:
You can also use a Standard Schema or an adapter at the form level:
```tsx
import { zodValidator } from '@tanstack/zod-form-adapter'
import { zodValidator } from '@tanstack/zod-form-adapter' // Not required for Standard Schema libraries
import { z } from 'zod'
// ...
Expand All @@ -492,7 +522,7 @@ const formSchema = z.object({
})
const form = useForm({
validatorAdapter: zodValidator(),
validatorAdapter: zodValidator(), // Not required for Standard Schema libraries
validators: {
onChange: formSchema
},
Expand Down
48 changes: 38 additions & 10 deletions docs/framework/solid/guides/validation.md
Original file line number Diff line number Diff line change
Expand Up @@ -312,18 +312,47 @@ This will debounce every async call with a 500ms delay. You can even override th

> This will run `onChangeAsync` every 1500ms while `onBlurAsync` will run every 500ms.
## Adapter-Based Validation (Zod, Yup, Valibot)
## Validation through Schema Libraries

While functions provide more flexibility and customization over your validation, they can be a bit verbose. To help solve this, there are libraries like [Valibot](https://valibot.dev/), [Yup](https://github.com/jquense/yup), and [Zod](https://zod.dev/) that provide schema-based validation to make shorthand and type-strict validation substantially easier.
While functions provide more flexibility and customization over your validation, they can be a bit verbose. To help solve this, there are libraries that provide schema-based validation to make shorthand and type-strict validation substantially easier.

Luckily, we support all of these libraries through official adapters:
### Standard Schema Libraries

TanStack Form natively supports all libraries following the [Standard Schema specification](https://github.com/standard-schema/standard-schema), most notably:
- [Valibot](https://valibot.dev/)
- [ArkType](https://arktype.io/)

To use schemas from these libraries you can simply pass them to the `validators` props as you would do with a custom function:

```tsx
import { z } from 'zod'

// ...

const form = createForm(() => ({
// ...
}));

<form.Field
name="age"
validatorAdapter={zodValidator()}
validators={{
onChange: z.number().gte(13, 'You must be 13 to make an account'),
}}
children={(field) => {
return <>{/* ... */}</>
}}
/>
```

### Other Schema Libraries (Zod, Yup)

We also support other libraries, [Zod](https://zod.dev/) and [Yup](https://github.com/jquense/yup) through an official adapter:

```bash
$ npm install @tanstack/zod-form-adapter zod
# or
$ npm install @tanstack/yup-form-adapter yup
# or
$ npm install @tanstack/valibot-form-adapter valibot
```

Once done, we can add the adapter to the `validator` property on the form or field:
Expand Down Expand Up @@ -376,19 +405,18 @@ These adapters also support async operations using the proper property names:
/>
```

### Form Level Adapter Validation
### Form Level Schema Validation


You can also use the adapter at the form level:
You can also use a Standard Schema or an adapter at the form level:

```tsx
import { zodValidator } from '@tanstack/zod-form-adapter'
import { zodValidator } from '@tanstack/zod-form-adapter' // Not required for Standard Schema libraries
import { z } from 'zod'

// ...

const form = createForm(() => ({
validatorAdapter: zodValidator(),
validatorAdapter: zodValidator(), // Not required for Standard Schema libraries
validators: {
onChange: z.object({
age: z.number().gte(13, 'You must be 13 to make an account'),
Expand Down
53 changes: 44 additions & 9 deletions docs/framework/vue/guides/validation.md
Original file line number Diff line number Diff line change
Expand Up @@ -322,18 +322,53 @@ This will debounce every async call with a 500ms delay. You can even override th

This will run `onChangeAsync` every 1500ms while `onBlurAsync` will run every 500ms.

## Adapter-Based Validation (Zod, Yup, Valibot)
## Validation through Schema Libraries

While functions provide more flexibility and customization over your validation, they can be a bit verbose. To help solve this, there are libraries like [Valibot](https://valibot.dev/), [Yup](https://github.com/jquense/yup), and [Zod](https://zod.dev/) that provide schema-based validation to make shorthand and type-strict validation substantially easier.
While functions provide more flexibility and customization over your validation, they can be a bit verbose. To help solve this, there are libraries that provide schema-based validation to make shorthand and type-strict validation substantially easier.

Luckily, we support all of these libraries through official adapters:
### Standard Schema Libraries

TanStack Form natively supports all libraries following the [Standard Schema specification](https://github.com/standard-schema/standard-schema), most notably:
- [Valibot](https://valibot.dev/)
- [ArkType](https://arktype.io/)

To use schemas from these libraries you can simply pass them to the `validators` props as you would do with a custom function:

```vue
<script setup lang="ts">
import { z } from 'zod'
// ...
const form = useForm({
// ...
})
</script>
<template>
<!-- ... -->
<form.Field
name="age"
:validator-adapter="zodValidator()"
:validators="{
onChange: z.number().gte(13, 'You must be 13 to make an account')
}"
>
<template v-slot="{ field }">
<!-- ... -->
</template>
</form.Field>
<!-- ... -->
</template>
```

### Other Schema Libraries (Zod, Yup)

We also support other libraries, [Zod](https://zod.dev/) and [Yup](https://github.com/jquense/yup) through an official adapter:

```bash
$ npm install @tanstack/zod-form-adapter zod
# or
$ npm install @tanstack/yup-form-adapter yup
# or
$ npm install @tanstack/valibot-form-adapter valibot
```

Once done, we can add the adapter to the `validator` property on the form or field:
Expand Down Expand Up @@ -397,18 +432,18 @@ These adapters also support async operations using the proper property names:
</template>
```

### Form Level Adapter Validation
### Form Level Schema Validation

You can also use the adapter at the form level:
You can also use a Standard Schema or an adapter at the form level:

```typescript
import { zodValidator } from '@tanstack/zod-form-adapter'
import { zodValidator } from '@tanstack/zod-form-adapter' // Not required for Standard Schema libraries
import { z } from 'zod'

// ...

const form = useForm({
validatorAdapter: zodValidator(),
validatorAdapter: zodValidator(), // Not required for Standard Schema libraries
validators: {
onChange: z.object({
age: z.number().gte(13, 'You must be 13 to make an account'),
Expand Down

0 comments on commit f6e677b

Please sign in to comment.