feat(FormGroup): add eager validation (#992)

docs/components/content/examples/FormGroupEagerValidationExample.vue

@@ -0,0 +1,19 @@
+<template>
+  <UForm :schema="schema" :state="state" class="space-y-4">
+    <UFormGroup label="Username" name="username" eager-validation>
+      <UInput v-model="state.username" placeholder="Choose Username" />
+    </UFormGroup>
+  </UForm>
+</template>
+
+<script setup>
+import { z } from 'zod'
+
+const schema = z.object({
+  username: z.string().min(10, 'Must be at least 10 characters')
+})
+
+const state = reactive({
+  username: undefined
+})
+</script>

docs/content/3.forms/10.form.md

@@ -161,6 +161,10 @@ async function onSubmit (event: FormSubmitEvent<any>) {
 
 The Form component automatically triggers validation upon `submit`, `input`, `blur` or `change` events. This ensures that any errors are displayed as soon as the user interacts with the form elements. You can control when validation happens this using the `validate-on` prop.
 
+::callout{icon="i-heroicons-light-bulb"}
+Note that the `input` event is not triggered until after the initial `blur` event. This is to prevent the form from being validated as the user is typing. You can override this behavior by setting the [`eager-validation`](/forms/form-group#eager-validation) prop on [`FormGroup`](/forms/form-group) to `true`.
+::
+
 ::component-example
 ---
 component: 'form-example-elements'

docs/content/3.forms/9.form-group.md

@@ -163,6 +163,12 @@ code: >-
   This will only work with form elements that support the `size` prop.
 ::
 
+### Eager Validation
+
+By default, validation is only triggered after the initial `blur` event. This is to prevent the form from being validated as the user is typing. You can override this behavior by setting the `eager-validation` prop to `true`
+
+:component-example{component="form-group-eager-validation-example"}
+
 ## Slots
 
 ### `label`

src/runtime/components/forms/FormGroup.vue

@@ -94,6 +94,10 @@ export default defineComponent({
     ui: {
       type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
       default: undefined
+    },
+    eagerValidation: {
+      type: Boolean,
+      default: false
     }
   },
   setup (props) {
@@ -114,7 +118,8 @@ export default defineComponent({
       error,
       inputId,
       name: computed(() => props.name),
-      size: computed(() => props.size)
+      size: computed(() => props.size),
+      eagerValidation: computed(() => props.eagerValidation)
     })
 
     return {

src/runtime/composables/useFormGroup.ts

@@ -9,6 +9,7 @@ type InputProps = {
   color?: string
   name?: string
   isFieldset?: boolean
+  eagerValidation?: boolean
 }
 
 export const useFormGroup = (inputProps?: InputProps, config?: any) => {
@@ -49,7 +50,7 @@ export const useFormGroup = (inputProps?: InputProps, config?: any) => {
     }
 
     const emitFormInput = useDebounceFn(() => {
-      if (blurred.value) {
+      if (blurred.value || formGroup?.eagerValidation.value) {
         emitFormEvent('input', formGroup?.name.value)
       }
     }, 300)

src/runtime/types/form.d.ts

@@ -32,4 +32,5 @@ export interface InjectedFormGroupValue {
   name: Ref<string>
   size: Ref<string | number | symbol>
   error: Ref<string | boolean>
+  eagerValidation: Ref<boolean>
 }