File tree Expand file tree Collapse file tree 3 files changed +132
-0
lines changed
src/routes/tests/issue-313 Expand file tree Collapse file tree 3 files changed +132
-0
lines changed Original file line number Diff line number Diff line change 1+ import { superValidate , message } from '$lib/server' ;
2+ import { fail } from '@sveltejs/kit' ;
3+ import { schema } from './schema' ;
4+
5+ import type { Actions , PageServerLoad } from './$types' ;
6+
7+ ///// Load function /////
8+
9+ export const load : PageServerLoad = async ( ) => {
10+ const loginForm = await superValidate ( schema ) ;
11+ return { loginForm } ;
12+ } ;
13+
14+ ///// Form actions /////
15+
16+ export const actions : Actions = {
17+ default : async ( { request } ) => {
18+ const form = await superValidate ( request , schema ) ;
19+
20+ console . log ( 'POST' , form ) ;
21+
22+ if ( ! form . valid ) return fail ( 400 , { form } ) ;
23+
24+ console . log ( form . data ) ;
25+ if ( form . data . name === 'fail' ) return fail ( 401 , { form, isFail : true } ) ;
26+
27+ return message ( form , 'Form posted successfully!' ) ;
28+ }
29+ } ;
Original file line number Diff line number Diff line change 1+ <script lang =" ts" >
2+ import { page } from ' $app/stores' ;
3+ import { superForm } from ' $lib/client' ;
4+ import SuperDebug from ' $lib/client/SuperDebug.svelte' ;
5+
6+ export let data;
7+ export let form;
8+
9+ const {
10+ form : loginForm,
11+ errors,
12+ message,
13+ enhance
14+ } = superForm (data .loginForm );
15+ </script >
16+
17+ <SuperDebug data ={$loginForm } />
18+
19+ <p >{form ?.form .data .name }</p >
20+
21+ <h3 >Superforms testing ground</h3 >
22+
23+ {#if $message }
24+ <div
25+ class =" status"
26+ class:error ={$page .status >= 400 }
27+ class:success ={$page .status == 200 }
28+ >
29+ {$message }
30+ </div >
31+ {/if }
32+
33+ <form method =" POST" use:enhance >
34+ <label >
35+ Name<br />
36+ <input
37+ name =" name"
38+ aria-invalid ={$errors .name ? ' true' : undefined }
39+ bind:value ={$loginForm .name }
40+ />
41+ {#if $errors .name }<span class ="invalid" >{$errors .name }</span >{/if }
42+ </label >
43+
44+ <label >
45+ Email<br />
46+ <input
47+ name =" email"
48+ type =" email"
49+ aria-invalid ={$errors .email ? ' true' : undefined }
50+ bind:value ={$loginForm .email }
51+ />
52+ {#if $errors .email }<span class ="invalid" >{$errors .email }</span >{/if }
53+ </label >
54+ {#if form ?.isFail }
55+ fail
56+ {/if }
57+ <button >Submit</button >
58+ </form >
59+
60+ <hr />
61+ <p >
62+ <a target =" _blank" href =" https://superforms.rocks/api" >API Reference</a >
63+ </p >
64+
65+ <style >
66+ .invalid {
67+ color : red ;
68+ }
69+
70+ .status {
71+ color : white ;
72+ padding : 4px ;
73+ padding-left : 8px ;
74+ border-radius : 2px ;
75+ font-weight : 500 ;
76+ }
77+
78+ .status.success {
79+ background-color : seagreen ;
80+ }
81+
82+ .status.error {
83+ background-color : #ff2a02 ;
84+ }
85+
86+ input {
87+ background-color : #ddd ;
88+ }
89+
90+ a {
91+ text-decoration : underline ;
92+ }
93+
94+ hr {
95+ margin-top : 4rem ;
96+ }
97+ </style >
Original file line number Diff line number Diff line change 1+ import { z } from 'zod' ;
2+
3+ export const schema = z . object ( {
4+ name : z . string ( ) . min ( 1 ) ,
5+ email : z . string ( ) . email ( )
6+ } ) ;
You can’t perform that action at this time.
0 commit comments