Added test for drop menu without js.

Author: ciscoheat

src/routes/tests/no-js-dropdown/+page.server.ts

@@ -0,0 +1,53 @@
+import { message, superValidate } from '$lib/server';
+import { fail } from '@sveltejs/kit';
+import { z } from 'zod';
+
+import type { Actions, PageServerLoad } from './$types';
+
+const schema = z
+  .object({
+    scoops: z.number().int().min(1).default(1),
+    flavours: z
+      .string()
+      .array()
+      .min(1, 'Please select at least one flavour')
+      .default(['Mint choc chip'])
+  })
+  .refine((data) => data.flavours.length <= data.scoops, {
+    message: "Can't order more flavours than scoops!",
+    path: ['flavours']
+  });
+
+///// Load //////////////////////////////////////////////////////////
+
+export const load: PageServerLoad = async () => {
+  const form = await superValidate(schema);
+  return { form };
+};
+
+///// Form actions //////////////////////////////////////////////////
+
+function join(flavours: string[]) {
+  if (flavours.length === 1) return flavours[0];
+  return `${flavours.slice(0, -1).join(', ')} and ${
+    flavours[flavours.length - 1]
+  }`;
+}
+
+export const actions: Actions = {
+  default: async ({ request }) => {
+    const form = await superValidate(request, schema);
+
+    console.log('POST', form);
+
+    if (!form.valid) return fail(400, { form });
+
+    return message(
+      form,
+      `You ordered ${form.data.scoops} ${
+        form.data.scoops === 1 ? 'scoop' : 'scoops'
+      }
+		of ${join(form.data.flavours)}`
+    );
+  }
+};

src/routes/tests/no-js-dropdown/+page.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { superForm } from '$lib/client';
+  import SuperDebug from '$lib/client/SuperDebug.svelte';
+
+  export let data;
+
+  const { form, errors, enhance, message } = superForm(data.form, {
+    clearOnSubmit: 'none'
+  });
+
+  let menu = ['Cookies and cream', 'Mint choc chip', 'Raspberry ripple'];
+</script>
+
+<SuperDebug data={$form} />
+
+<form method="POST" use:enhance>
+  <h2>Size</h2>
+
+  <select name="scoops" bind:value={$form.scoops}>
+    {#each ['One scoop', 'Two scoops', 'Three scoops'] as scoop, i}
+      <option value={i + 1} selected={$form.scoops == i + 1}>{scoop}</option>
+    {/each}
+  </select>
+
+  {#if $errors.scoops}<p>{$errors.scoops}</p>{/if}
+
+  <h2>Flavours</h2>
+
+  {#each menu as flavour}
+    <label>
+      <input
+        type="checkbox"
+        bind:group={$form.flavours}
+        name="flavours"
+        value={flavour}
+      />
+      {flavour}
+    </label>
+  {/each}
+
+  {#if $errors.flavours?._errors}<p>{$errors.flavours._errors}</p>{/if}
+
+  {#if $message}<p>{$message}</p>{/if}
+  <button>Submit</button>
+</form>
+
+<p class="info">
+  <a href="https://svelte.dev/tutorial/group-inputs" target="_blank"
+    >Original code from Svelte documentation</a
+  >
+</p>
+
+<style>
+  .info {
+    border-top: 1px solid gray;
+    margin-top: 4rem;
+  }
+</style>