ciscoheat / sveltekit-superforms

Making SvelteKit forms a pleasure to use!
https://superforms.rocks
MIT License
2.26k stars 66 forks source link

isTainted does not change on nested forms #501

Closed manicar2093 closed 2 weeks ago

manicar2093 commented 3 weeks ago

Description Hi!, I have a form like this:

<script lang="ts>
        export let data: SuperValidated<Infer<NewBiotestFormSchema>>;
    const form = superForm(data, {
        validators: zodClient(newBiotestFormSchema),
        taintedMessage: true
    });
</script>

<form enctype="multipart/form-data" method="POST" use:enhance>
    <details>
        <summary class="font-medium">{$t('default.ClinicData')}</summary>
        <div>
            <Form.Field {form} name="name" class="mb-5">
                <Form.Control let:attrs>
                    <Form.Label>{$t('default.Name')}</Form.Label>
                    <Input {...attrs} type="text" bind:value={$formData.name} />
                </Form.Control>
                <Form.FieldErrors />
            </Form.Field>

            <Form.Field {form} name="nickname" class="mb-5">
                <Form.Control let:attrs>
                    <Form.Label>{$t('default.Nickname')}</Form.Label>
                    <Input {...attrs} type="text" bind:value={$formData.nickname} />
                </Form.Control>
                <Form.FieldErrors />
            </Form.Field>
        </div>
    </details>

    <Form.Button class="mt-3" disabled={$delayed}>{$t('default.Save')}</Form.Button>
</form>

And when refresh the page the message for tainted form is not sent. Even isTainted property from form is false.

I think the problem is my fields are nested into details>div because other form without this difference works fine

ciscoheat commented 3 weeks ago

Can you try to make a MRE, preferably without Formsnap, so I can take a closer look? Use this one:

https://sveltelab.dev/github.com/ciscoheat/superforms-examples/tree/zod

manicar2093 commented 3 weeks ago

Hi! Sure! Give me opportunity and I add it! Thank you! 😃

manicar2093 commented 2 weeks ago

Oh! This is embarrassing hahaha. I have tried again and it seems was a weird issue I'm not longer facing. Sorry and thank you for your answer.

If any at any time has this error you can see tainted state using tainted property like:

<script lang="ts">
        const { form: formData, tainted } = form;
</script>

<p>{JSON.stringify($tainted)}

This will show you how fields change their status 😃

And again thank you @ciscoheat!

ciscoheat commented 2 weeks ago

No problem, I didn't do much. :) It's even better to use SuperDebug for displaying stores and other data: https://superforms.rocks/super-debug