N
Nuxt•3mo ago
Uchuu

how do I trigger form validation only when submission is attempted?

export type FormInputEvents = 'input' | 'blur' | 'change' | 'focus';
2 Replies
kapa.ai
kapa.ai•3mo ago
Hi @Uchuu. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To trigger form validation only when submission is attempted in Nuxt UI's Form component, you can use the validateOn prop to control when validation occurs. By default, the Form component validates on 'input', 'change', and 'blur' events as mentioned in the documentation: 
validateOn: ['blur', 'change', 'input']
validateOn: ['blur', 'change', 'input']
To validate only on submission, you can set the validateOn prop to an empty array, which prevents automatic validation on input events: 
<template>
  <UForm
    :state="state"
    :schema="schema"
    :validate-on="[]"
    @submit="onSubmit"
  >
    <!-- Form fields -->
    <UButton type="submit">Submit</UButton>
  </UForm>
</template>
<template>
  <UForm
    :state="state"
    :schema="schema"
    :validate-on="[]"
    @submit="onSubmit"
  >
    <!-- Form fields -->
    <UButton type="submit">Submit</UButton>
  </UForm>
</template>
With this configuration, validation will only occur when the form is submitted, either by clicking the submit button or by programmatically calling the form's submit() method. You can also access the form instance using useTemplateRef to trigger validation manually: 
<script setup lang="ts">
const form = useTemplateRef('form')

function validateForm() {
  form.value?.validate()
}
</script>

<template>
  <UForm ref="form" :validate-on="[]" />
</template>
<script setup lang="ts">
const form = useTemplateRef('form')

function validateForm() {
  form.value?.validate()
}
</script>

<template>
  <UForm ref="form" :validate-on="[]" />
</template>
The form exposes methods like validate() that you can call to trigger validation programmatically, as documented in the Form component's expose section. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@1035470271441805353> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?