How validation hides errors for not yet used fields

[iBobik]

Description

I see in the examples form validation errors appear only for fields what were used by the user - just initialized form will all fields required will not be all in red, errors appear only on fields I left empty or when I try to submit form.

This behavior does not work in my project. Here it shows required errors everywhere when I change the first field.

How this „used field“ detection works? What to do to not break it?

Thank you for help.

[iBobik]

Btw, it works when state is platin Reactive object, but don’t when I store that object in local storage with useSessionStorage. So maybe initial load from the storage will reset that „not used indicator“.

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity.

[iBobik]

Still needs to answer.

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity.

[Yves852]

I'm facing the same problem. Followed the instructions at https://ui.nuxt.com/components/form#custom-validation but all invalid/empty fields are triggered when the first input is left.

Tried to replace the if statements with a switch-case block but at least one error appears.

[Yves852]

@iBobik I found a solution(s).

First I moved from the custom validation to zod.

Second, previously to prevent some fields to be validated I didn't wrapped it with a <UFormGroup>. Now instead I moved the variable out of the zod schema.

To summarize:

<script setup lang="ts">
+ import { z } from 'zod'

+ const schema = z.object({
+  name: z.string(),  
-  firstname: z.string(),
+  email: z.string().email('Invalide email'),
+  message: z.string(),
+ })

- function validateForm() { ... }
</script>

<template>
    <UForm
     :state="state"
+    :schema="schema"
     class="..."
     @submit="onSubmit"
    >
+        <UFormGroup name="firstname">
            <UInput
              v-model="state.firstname"
              placeholder="First name"
            />
+        </UFormGroup>
          <UFormGroup name="name">
            <UInput
              v-model="state.name"
              placeholder="Name"
            />
          </UFormGroup>
          <UFormGroup name="email">
            <UInput
              v-model="state.email"
              placeholder="Email"
            />
          </UFormGroup>
          
          <UFormGroup name="message">
            <UTextarea
              v-model="state.message"
              placeholder="Message"
            />
          </UFormGroup>
          <UButton type="submit" size="xl" class="w-fit mt-4 mx-auto" variant="soft">
            Send
          </UButton>
     </UForm>
</template>

[github-actions[bot]]

Hi! 👋

This issue has been automatically closed due to prolonged inactivity.

We're a small team and can't address every report, but we appreciate your feedback and contributions.

If this issue is still relevant with the latest version of Nuxt UI, please feel free to reopen or create a new issue with updated details.

Thank you for your understanding and support!

— Nuxt UI Team