@@ -11,6 +11,11 @@ import Npm from '@/components/npm.astro';
1111import clientCode from ' ./_sveltekit-client.svelte.invalid?raw' ;
1212import 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