Test page for valid store.

Author: ciscoheat

src/lib/client/validateField.ts

@@ -124,10 +124,6 @@ export async function validateField<T extends AnyZodObject, M>(
     return get(Errors);
   }
 
-  function Errors_exist() {
-    return errorsExist(get(Errors));
-  }
-
   function Errors_clear(
     options: NonNullable<Parameters<typeof clearErrors>[1]>
   ) {

src/routes/valid/+page.server.ts

@@ -0,0 +1,55 @@
+import { message, superValidate } from '$lib/server';
+import { error, redirect } from '@sveltejs/kit';
+import { users, userId, userSchema } from '../users';
+
+const schema = userSchema.extend({
+  id: userSchema.shape.id.optional()
+});
+
+///// Load //////////////////////////////////////////////////////////
+
+export const load = async ({ url }) => {
+  // READ user
+  // For simplicity, use the id query parameter instead of a route.
+  const id = url.searchParams.get('id');
+  const user = id ? users.find((u) => u.id == id) : null;
+
+  if (id && !user) throw error(404, 'User not found.');
+
+  const form = await superValidate(user, schema);
+  return { form, users };
+};
+
+///// Form actions //////////////////////////////////////////////////
+
+export const actions = {
+  default: async (event) => {
+    const data = await event.request.formData();
+
+    const form = await superValidate(data, schema);
+    if (!form.valid) return message(form, 'Invalid form');
+
+    if (!form.data.id) {
+      // CREATE user
+      const user = { ...form.data, id: userId() };
+      users.push(user);
+
+      return message(form, 'User created!');
+    } else {
+      const user = users.find((u) => u.id == form.data.id);
+      if (!user) throw error(404, 'User not found.');
+
+      const index = users.indexOf(user);
+
+      if (data.has('delete')) {
+        // DELETE user
+        users.splice(index, 1);
+        throw redirect(303, '?');
+      } else {
+        // UPDATE user
+        users[index] = { ...form.data, id: user.id };
+        return message(form, 'User updated!');
+      }
+    }
+  }
+};

src/routes/valid/+page.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import type { PageData } from './$types';
+  import { page } from '$app/stores';
+  import { superForm } from '$lib/client';
+  import { userSchema } from '../users';
+
+  export let data: PageData;
+
+  const { form, errors, enhance, delayed, message, valid } = superForm(
+    data.form,
+    {
+      validators: $page.url.searchParams.has('zod')
+        ? userSchema.extend({
+            id: userSchema.shape.id.optional()
+          })
+        : {
+            name: (name: string) =>
+              name.length < 2 ? 'Your name is too short' : null,
+            email: (email: string) =>
+              !email.includes('@') ? 'Enter a valid email address' : null
+          }
+    }
+  );
+</script>
+
+<a href="/">&lt; Back to start</a>
+
+<h1>sveltekit-superforms</h1>
+
+<div class="users">
+  {#each data.users as user}
+    <a href="?id={user.id}">{user.name}</a>
+  {/each}
+  {#if $form.id}
+    <form action="/crud">
+      <button>Create new</button>
+    </form>
+  {/if}
+</div>
+
+{#if $message}
+  <h3 class:invalid={$page.status >= 400}>{$message}</h3>
+{/if}
+
+<h2>{!$form.id ? 'Create' : 'Update'} user</h2>
+
+<b>Valid: {$valid}</b>
+
+<form method="POST" use:enhance>
+  <input type="hidden" name="id" bind:value={$form.id} />
+
+  <label>
+    Name<br />
+    <input name="name" data-invalid={$errors.name} bind:value={$form.name} />
+    {#if $errors.name}<span class="invalid">{$errors.name}</span>{/if}
+  </label>
+
+  <label>
+    E-mail<br />
+    <input
+      name="email"
+      type="email"
+      data-invalid={$errors.email}
+      bind:value={$form.email}
+    />
+    {#if $errors.email}<span class="invalid">{$errors.email}</span>{/if}
+  </label>
+
+  <button>Submit</button>
+  {#if $delayed}Working...{/if}
+
+  {#if $form.id}
+    <button
+      name="delete"
+      value="delete"
+      on:click={(e) => !confirm('Are you sure?') && e.preventDefault()}
+      class="danger">Delete user</button
+    >
+  {/if}
+</form>
+
+<style>
+  .invalid {
+    color: red;
+  }
+
+  .danger {
+    background-color: brown;
+  }
+
+  .users {
+    columns: 3 150px;
+  }
+
+  .users > * {
+    display: block;
+    white-space: nowrap;
+    overflow-x: hidden;
+  }
+
+  .users a:hover {
+    border-bottom: none;
+  }
+</style>