Enums could not be detected as an invalid value if the posted value was an empty string.

Author: ciscoheat

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Added `focusOnError` option to `SuperForm.validateForm` type (it was only in the implementation).
+- Enums could not be detected as an invalid value if the posted value was an empty string, instead it defaulted to the enum first value.
 
 ## [2.2.0] - 2024-02-15
 

src/lib/formData.ts

@@ -249,15 +249,15 @@ function parseFormDataEntry(key: string, value: string, info: SchemaInfo): unkno
 			return false;
 		}
 
-		// Special case for numbers/integers with default value empty string
-		// (for input field placeholders to show)
-		/*
-		if ((type == 'number' || type == 'integer') && info.schema.default === '') {
-			return 0;
+		const defaultValue = defaultValues<unknown>(info.schema, info.isOptional, [key]);
+
+		// Special case for empty posted enums, then the empty value should be returned,
+		// otherwise even a required field will get a default value, resulting in that
+		// posting missing enum values must use strict mode.
+		if (info.schema.enum && defaultValue !== null && defaultValue !== undefined) {
+			return value;
 		}
-		*/
 
-		const defaultValue = defaultValues<unknown>(info.schema, info.isOptional, [key]);
 		if (defaultValue !== undefined) return defaultValue;
 
 		if (info.isNullable) return null;

src/routes/(v2)/v2/enum-proxy/+page.server.ts

@@ -0,0 +1,27 @@
+import { zod } from '$lib/adapters/zod.js';
+import { message, superValidate } from '$lib/server/index.js';
+import { schema } from './schema.js';
+import { fail } from '@sveltejs/kit';
+
+export const load = async () => {
+	const adapter = zod(schema);
+	adapter.defaults = { fish: '' as 'trout', moreFish: '' as 'trout' };
+
+	const form = await superValidate(adapter);
+	const fish = adapter.jsonSchema?.properties?.['fish'];
+	return { form, fish: typeof fish === 'object' && fish.enum ? fish.enum : [] };
+};
+
+export const actions = {
+	default: async ({ request }) => {
+		const formData = await request.formData();
+		console.log(formData);
+
+		const form = await superValidate(formData, zod(schema));
+		console.log(form);
+
+		if (!form.valid) return fail(400, { form });
+
+		return message(form, 'Posted OK!');
+	}
+};

src/routes/(v2)/v2/enum-proxy/+page.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { superForm } from '$lib/index.js';
+	import SuperDebug from '$lib/client/SuperDebug.svelte';
+	//import { zod } from '$lib/adapters/zod.js'
+	//import { schema } from './schema.js';
+
+	export let data;
+
+	const { form, errors, tainted, message, enhance } = superForm(data.form, {
+		taintedMessage: false
+		//dataType: 'json',
+		//validators: zod(schema)
+	});
+</script>
+
+<SuperDebug data={{ $form, $errors, $tainted }} />
+
+{#if $message}<h4>{$message}</h4>{/if}
+
+<form method="POST" use:enhance>
+	<label>
+		Fish:<br />
+		{#each data.fish as fishName}
+			<input name="fish" type="radio" value={fishName} bind:group={$form.fish} /> {fishName}<br />
+		{/each}
+		{#if $errors.fish}<span class="invalid">{$errors.fish}</span>{/if}
+	</label>
+	<label>
+		More fish:<br />
+		<select name="moreFish" bind:value={$form.moreFish}>
+			<option value="">Pick one:</option>
+			{#each data.fish as fishName}
+				<option value={fishName}>{fishName}</option>
+			{/each}
+		</select>
+		{#if $errors.moreFish}<span class="invalid">{$errors.moreFish}</span>{/if}
+	</label>
+	<div>
+		<button>Submit</button>
+	</div>
+</form>
+
+<style lang="scss">
+	form {
+		margin: 2rem 0;
+
+		input {
+			background-color: #dedede;
+
+			&[type='checkbox'] {
+				margin-left: 1em;
+			}
+		}
+
+		.invalid {
+			color: crimson;
+		}
+	}
+</style>

src/routes/(v2)/v2/enum-proxy/schema.ts

@@ -0,0 +1,8 @@
+import { z } from 'zod';
+
+const fishes = ['trout', 'tuna', 'shark'] as const;
+
+export const schema = z.object({
+	fish: z.enum(fishes),
+	moreFish: z.enum(fishes)
+});

src/tests/superValidate.test.ts

@@ -820,3 +820,62 @@ describe('Array validation', () => {
 		});
 	});
 });
+
+describe('Enum validation', () => {
+	const fishes = ['trout', 'tuna', 'shark'] as const;
+
+	const schema = z.object({
+		fish: z.enum(fishes),
+		moreFish: z.enum(fishes)
+	});
+
+	const schema2 = schema.extend({
+		fish: schema.shape.fish.nullable(),
+		moreFish: schema.shape.moreFish.optional()
+	});
+
+	describe('With FormData', () => {
+		it('should not return the default first enum value when an empty string is posted', async () => {
+			const formData = new FormData();
+			const adapter = zod(schema);
+			const form = await superValidate(formData, adapter);
+			assert(form.valid);
+			expect(form.data).toEqual({ fish: 'trout', moreFish: 'trout' });
+
+			formData.set('fish', '');
+			const form2 = await superValidate(formData, adapter);
+			assert(!form2.valid);
+			expect(form2.data).toEqual({ fish: '', moreFish: 'trout' });
+			expect(form2.errors.fish?.[0]).toMatch(/^Invalid enum value\./);
+		});
+
+		it('should still work with undefined or nullable', async () => {
+			const formData = new FormData();
+			const adapter = zod(schema2);
+			const form = await superValidate(formData, adapter);
+			assert(form.valid);
+			expect(form.data).toEqual({ fish: null, moreFish: undefined });
+
+			formData.set('fish', '');
+			const form2 = await superValidate(formData, adapter);
+			assert(form2.valid);
+			expect(form2.data).toEqual({ fish: null, moreFish: undefined });
+		});
+	});
+
+	describe('With data objects', () => {
+		it('should add the default enum value if field does not exist', async () => {
+			const adapter = zod(schema);
+			const form = await superValidate({}, adapter);
+			assert(form.valid);
+			expect(form.data).toEqual({ fish: 'trout', moreFish: 'trout' });
+		});
+
+		it('should add the default null/undefined if field does not exist', async () => {
+			const adapter = zod(schema2);
+			const form = await superValidate({}, adapter);
+			assert(form.valid);
+			expect(form.data).toEqual({ fish: null, moreFish: undefined });
+		});
+	});
+});