Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

isTainted does not change on nested forms #501

Closed
1 task done
manicar2093 opened this issue Nov 3, 2024 · 4 comments
Closed
1 task done

isTainted does not change on nested forms #501

manicar2093 opened this issue Nov 3, 2024 · 4 comments
Labels
bug Something isn't working question Further information is requested

Comments

@manicar2093
Copy link

  • Before posting an issue, read the FAQ and search the previous issues.

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

@manicar2093 manicar2093 added the bug Something isn't working label Nov 3, 2024
@ciscoheat
Copy link
Owner

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

@ciscoheat ciscoheat added the question Further information is requested label Nov 4, 2024
@manicar2093
Copy link
Author

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

@manicar2093
Copy link
Author

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
Copy link
Owner

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants