From 4d310220dd415e16ed53126bdf4981889890f6a8 Mon Sep 17 00:00:00 2001 From: Samuel Andert Date: Fri, 28 Jul 2023 12:30:27 +0200 Subject: [PATCH] Updated the Forms example --- .../components/{ => examples}/Flows.svelte | 0 src/lib/components/examples/Form.svelte | 119 ++++++++++++++++++ .../HelloEarth.svelte | 0 src/lib/types/UserSchema.ts | 14 ++- src/routes/helloearth/+page.svelte | 7 +- src/routes/validation/+page.svelte | 60 ++------- 6 files changed, 143 insertions(+), 57 deletions(-) rename src/lib/components/{ => examples}/Flows.svelte (100%) create mode 100644 src/lib/components/examples/Form.svelte rename src/lib/components/{HelloEarth => examples}/HelloEarth.svelte (100%) diff --git a/src/lib/components/Flows.svelte b/src/lib/components/examples/Flows.svelte similarity index 100% rename from src/lib/components/Flows.svelte rename to src/lib/components/examples/Flows.svelte diff --git a/src/lib/components/examples/Form.svelte b/src/lib/components/examples/Form.svelte new file mode 100644 index 0000000..e92815d --- /dev/null +++ b/src/lib/components/examples/Form.svelte @@ -0,0 +1,119 @@ + + +
+ {#if $successMessage} + + + {:else} +
+
+ {#if $errors.name} + {$errors.name} + {:else} + + {/if} + + +
+ +
+ {#if $errors.email} + {$errors.email} + {:else} + + {/if} + + +
+ + +
+ {/if} +
diff --git a/src/lib/components/HelloEarth/HelloEarth.svelte b/src/lib/components/examples/HelloEarth.svelte similarity index 100% rename from src/lib/components/HelloEarth/HelloEarth.svelte rename to src/lib/components/examples/HelloEarth.svelte diff --git a/src/lib/types/UserSchema.ts b/src/lib/types/UserSchema.ts index 4233085..0cbf894 100644 --- a/src/lib/types/UserSchema.ts +++ b/src/lib/types/UserSchema.ts @@ -1,5 +1,17 @@ import { z } from 'zod'; +// Define custom validation messages +const validationMessages = { + name: { + minLength: 'Name must be at least 3 characters.', + maxLength: 'Name must contain at most 10 characters.', + }, + email: { + isEmail: 'Invalid email address.', + }, +}; + export const UserSchema = z.object({ - name: z.string().min(3).max(10) + name: z.string().min(3, validationMessages.name.minLength).max(10, validationMessages.name.maxLength), + email: z.string().email(validationMessages.email.isEmail), }); diff --git a/src/routes/helloearth/+page.svelte b/src/routes/helloearth/+page.svelte index 20597d5..b485ab0 100644 --- a/src/routes/helloearth/+page.svelte +++ b/src/routes/helloearth/+page.svelte @@ -11,11 +11,12 @@ }, layout: { areas: ` + "main aside" "main aside" "footer footer"; `, columns: '1fr 1fr', - rows: '1fr auto' + rows: '1fr 1fr auto' }, children: [ { @@ -36,8 +37,8 @@ services: ['helloEarthAlert'] }, { - id: 'testflows', - component: 'Flows', + id: 'form', + component: 'Form', slot: 'aside' }, { diff --git a/src/routes/validation/+page.svelte b/src/routes/validation/+page.svelte index cddb45e..09c407d 100644 --- a/src/routes/validation/+page.svelte +++ b/src/routes/validation/+page.svelte @@ -1,56 +1,10 @@ - -
-
-
- {#if $errors.name} - {$errors.name} - {:else} - - {/if} - - -
- - -
-
+