After submit the validation data is empty

[richardvaldivieso]

Hello, I post this in a different issue, but since it was closed I am going to create a different issue. I am creating a simple form. I am validating my schema using zod. However, when I submit I noticed that my form is invalid. I tried to console the form object and I got the form invalid with empty values on my form.

Here is my schema:

import {z} from "zod";

export const _types = [ 'Platform', 'Framework','Language','Methodology','Tool'] as const;
export const _disciplines = ['Backend','Frontend', 'NA'] as const;

export const skillSchema = z.object({
    Id: z.string()
        .min(3,"Id must be at least 3 characters")
        .max(75,"Id must be 75 characters or less"),
    Name: z.string()
        .min(3,"Name must be at least 3 characters")
        .max(100,"Name must be at least 100 characters or less"),
    Types: z.enum(_types).array().min(1, "Please select a type"),
    Discipline: z.enum(_disciplines).array().min(1, "Please select a discipline")
});

Here is my +page.server

import { zod } from 'sveltekit-superforms/adapters';
import type {Actions, PageServerLoad} from "./$types";
import {skillSchema} from "./schema";
import {fail} from "@sveltejs/kit";

export const load: PageServerLoad = async () => {
    const form =  await superValidate(zod(skillSchema));
    return {form};
};

export const actions: Actions = {
    default: async ({request}) => {
        const form = await superValidate(request, zod(skillSchema))
        console.log(form)
        if (!form.valid) {
            return fail(400, { form });
        }
        return message(form, 'Form posted successfully!');
    }
}

And this the page

<script lang="ts">
    import {Input, Label, Select, Card, Span, Button} from "flowbite-svelte";
    import SuperDebug, {superForm} from "sveltekit-superforms"
    import type {PageData} from "./$types"
    import {_disciplines, _types} from "./schema";

    export let data: PageData;
    const { form, errors, enhance } = superForm(data.form)

</script>
<SuperDebug data={$form}/>
<div class="py-20">
    <div class="flex w-full flex-col items-center">
        <div class="max-w-2xl text-center">
            <h1 class="text-4xl font-semibold">Skills Maintenance</h1>
        </div>
        <Card class="mt-6 w-full" padding="xl" size="md">
            <form method="POST"  class="flex flex-col space-y-6" use:enhance>
                <Label class="space-y-2" for="Id-Input">
                    <Span>Id</Span>
                </Label>
                <Input id="Id-Input" bind:value={$form.Id} />
                {#if $errors.Id}
                    <span class="block text-red-600 dark:text-red-500">{$errors.Id}</span>
                {/if}
                <Label class="space-y-2" for="Name-Input">
                    <Span>
                        Name
                    </Span>
                </Label>
                <Input id="Name-Input"  bind:value={$form.Name}  />
                {#if $errors.Name}
                    <span class="block text-red-600 dark:text-red-500">{$errors.Name}</span>
                {/if}
                <Label class="space-y-2" for="Type-Dropdown">
                    <Span>
                        Type
                    </Span>
                </Label>
                <Select id="Type-Dropdown" bind:value={$form.Types}>
                    {#each _types as type}
                        <option value={type} selected={$form.Types.includes(type)}>{type}</option>
                    {/each}
                </Select>
                {#if $errors.Types?._errors}
                    <span class="block text-red-600 dark:text-red-500">{$errors.Types?._errors}</span>
                {/if}
                <Label class="space-y-2" for="Type-Dropdown">
                    <Span>
                        Discipline
                    </Span>
                </Label>
                <Select id="Type-Dropdown" bind:value={$form.Discipline}>
                    {#each _disciplines as discipline}
                        <option value={discipline} selected={$form.Discipline.includes(discipline)}>{discipline}</option>
                    {/each}
                </Select>
                {#if $errors.Discipline?._errors}
                    <span class="block text-red-600 dark:text-red-500">{$errors.Discipline?._errors}</span>
                {/if}
                <Button type="submit" class="w-full">Save</Button>
            </form>
        </Card>
    </div>
</div>

So basically I was expecting the page doing a post and had its valid property as true. But what I got is an invalid object. Literally empty. At this time my form does not have an action because I am testing superform, but I did create a fake action in the form but that did not work either. What am I doing wrong?

[ciscoheat]

Check the FAQ, first question: https://superforms.rocks/faq

[richardvaldivieso]

Thanks, that work! another question, I have to change my schema for the enums Types: z.enum(_types), Discipline: z.enum(_disciplines).default('NA') is there a way that I can a default an empty value so people just pick one. I mean in the second I add NA and I do not know how to validate against it if the user pick that value.

[ciscoheat]

Check if this works: https://superforms.rocks/default-values#enums-and-group-inputs

[richardvaldivieso]

Thanks again, but it works kind of. Because now the form is submit anyway if the Select is empty which is the default from the enum. Is there any way to change that behavior?

[ciscoheat]

Client-side validation perhaps, take a look at the website, most common scenarios are to be found there. https://superforms.rocks/concepts/client-validation