Skip to content

Commit d4ff1b8

Browse files
committed
[docs] Add sveltekit guide server block
1 parent c48bc58 commit d4ff1b8

File tree

2 files changed

+52
-4
lines changed

2 files changed

+52
-4
lines changed

apps/docs/src/content/docs/integrations/_sveltekit-server.ts.invalid

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,6 @@ const schema: Schema = {
1818
title: "Registration form",
1919
type: "object",
2020
required: ["firstName", "lastName"],
21-
additionalProperties: {
22-
type: "string",
23-
},
2421
properties: {
2522
firstName: {
2623
type: "string",

apps/docs/src/content/docs/integrations/sveltekit.mdx

Lines changed: 52 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,11 @@ import Npm from '@/components/npm.astro';
1111
import clientCode from './_sveltekit-client.svelte.invalid?raw';
1212
import serverCode from './_sveltekit-server.ts.invalid?raw';
1313

14+
Since this is a `Svelte` library, you may want to use it with the `SvelteKit`.
15+
16+
With this package you will be able to perform server-side validation of form data
17+
even if the user has `JavaScript` disabled.
18+
1419
## Installation
1520

1621
<Npm pkg="@sjsf/form @sjsf/sveltekit" />
@@ -24,4 +29,50 @@ import serverCode from './_sveltekit-server.ts.invalid?raw';
2429
<TabItem label='+page.server.ts'>
2530
<Code code={serverCode} lang='typescript' />
2631
</TabItem>
27-
</Tabs>
32+
</Tabs>
33+
34+
## Server
35+
36+
On the server side you should implement at least one [action](https://svelte.dev/docs/kit/form-actions)
37+
which will always return the result of `validateForm` function (`redirect` and `error` helpers are allowed).
38+
39+
```typescript
40+
export const actions = {
41+
default: async (event) => {
42+
const form = validateForm({/* ... */})
43+
if (!form.isValid) {
44+
return fail(400, { form });
45+
}
46+
return {
47+
form,
48+
};
49+
},
50+
} satisfies Actions;
51+
```
52+
53+
:::note
54+
55+
You can use any convenient name instead of `form`
56+
57+
:::
58+
59+
If you want to populate form from database, you can use `initForm` function inside the `load` function.
60+
61+
```typescript
62+
export const load = async () => {
63+
const data = await getData();
64+
const form = initForm({ schema, validator, initialValue: data });
65+
return { form };
66+
};
67+
```
68+
69+
:::note
70+
71+
The name of the `initForm` function result should match the name from the `action`
72+
73+
:::
74+
75+
## Client
76+
77+
## Disabled JavaScript
78+

0 commit comments

Comments
 (0)