Avoid validation error on rendering

[svex99]

My use case is simple, a user has a textarea to send a message, the message must be between 1 and 4096 characters, also there is a hidden field replyTo that I'd like to bind.

How to avoid that when the form is rendered, the displaying of a validation error "String must contain at least 1 character(s)". I'd like to display the error only when the users try to submit the form clicking the button, but validationMethod: "submit-only" seems not to be working as I expect.

The cause of the issue is that I return an invalid schema from the load function, but it doesn't make sense to me to return a string with some text when the user expects to write in a clean textarea. If I omit the message property, doesn't satisfy the schema, so anyway there is a premature validation error that I'd like to omit.

Here is my code:

<script context="module">
    import { z } from "zod";

    export const sendMessageSchema = z.object({
        message: z.string().min(1).max(4096).default(""),
        replyTo: z.number().nullable().optional(),
    });
</script>

<script lang="ts">
    import * as Form from "$lib/components/ui/form";
    import type { SuperValidated } from "sveltekit-superforms";

    export let form: SuperValidated<typeof sendMessageSchema>;
    export let action: string;
</script>

<Form.Root
    method="post"
    {action}
    schema={sendMessageSchema}
    {form}
    let:config
    options={{
        validationMethod: "submit-only",
    }}
>
    <Form.Field {config} name="message">
        <Form.Item>
            <Form.Label>Message</Form.Label>
            <Form.Textarea />
            <Form.Validation />
        </Form.Item>
    </Form.Field>

    <input hidden name="replyTo" bind:value={form.data.replyTo} />

    <Form.Button>Send</Form.Button>
</Form.Root>

import type { PageServerLoad } from "./$types";
import { superValidate } from "sveltekit-superforms/server";
import { sendMessageSchema } from "./SendMessageForm.svelte";

export const load: PageServerLoad = async () => {
    return {
        form: superValidate({ message: "", replyTo: "message-id" }, sendMessageSchema),
    };
};

Thanks in advance!

[koeeenig]

Hi @svex99

i had a similar case in my app using Superforms. I found a solution in the docs -> Initial form errors.

If i am not missing anything you need to return the result from superValidate called only with the schema like this:

import type { PageServerLoad } from "./$types";
import { superValidate } from "sveltekit-superforms/server";
import { sendMessageSchema } from "./SendMessageForm.svelte";

export const load: PageServerLoad = async () => {
    return {
        form: superValidate(sendMessageSchema),
    };
};

Try it out and let me know if it solved your problem.

[svex99]

Thank you, @koeeenig, for your answer. The code you shared doesn't solve the exact issue that I had, since I still need to send some data in that initial load. However, you had pointed me to the right site of the documentation where it's explained the solution.

If data was sent to superValidate, either posted or populated with data, errors will be returned unless the errors option is false.