Nuxt•2mo ago

How to delay validation until the submit button is clicked in UI V3 ?

It seems like there is only possiblity of validating in either of blur, change, or input events. But I wanna do it on submit Event only.

5 Replies

kapa.ai•2mo ago

Hi @Decisive Lieutenant. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To delay validation until the submit button is clicked in UI V3, you can utilize the validate-on prop of the UForm component. By default, validation is triggered on blur, input, change, and submit events. However, you can customize this behavior by setting the validate-on prop to only include the submit event. Here's an example of how you can achieve this:

<script setup lang="ts">
import { reactive } from 'vue'
import type { FormSubmitEvent } from '#ui/types'

const state = reactive({
  email: undefined,
  password: undefined
})

async function onSubmit(event: FormSubmitEvent<any>) {
  // Handle form submission
  console.log(event.data)
}
</script>

<template>
  <UForm :state="state" class="space-y-4" @submit="onSubmit" :validate-on="['submit']">
    <UFormGroup label="Email" name="email">
      <UInput v-model="state.email" />
    </UFormGroup>

    <UFormGroup label="Password" name="password">
      <UInput v-model="state.password" type="password" />
    </UFormGroup>

    <UButton type="submit">
      Submit
    </UButton>
  </UForm>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import type { FormSubmitEvent } from '#ui/types'

const state = reactive({
  email: undefined,
  password: undefined
})

async function onSubmit(event: FormSubmitEvent<any>) {
  // Handle form submission
  console.log(event.data)
}
</script>

<template>
  <UForm :state="state" class="space-y-4" @submit="onSubmit" :validate-on="['submit']">
    <UFormGroup label="Email" name="email">
      <UInput v-model="state.email" />
    </UFormGroup>

    <UFormGroup label="Password" name="password">
      <UInput v-model="state.password" type="password" />
    </UFormGroup>

    <UButton type="submit">
      Submit
    </UButton>
  </UForm>
</template>

In this example, the validate-on prop is set to ['submit'], which means validation will only occur when the form is submitted. This allows you to delay validation until the user clicks the submit button. For more information, you can refer to the Input events section in the knowledge sources. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@463307450402078720> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Decisive LieutenantOP•2mo ago

@kapa.ai Type '"submit"' is not assignable to type 'FormInputEvents'.

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Hmm, I don't know enough to give you a confident answer yet. It seems like there might be a type mismatch issue with the validate-on prop. You might want to check the documentation or the type definitions for FormInputEvents to ensure you're using the correct event names. You can refer to the Input events section for more details. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@463307450402078720> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

How to delay validation until the submit button is clicked in UI V3 ?

Did you find this page helpful?