chore: fix form validation

Author: christiankopac

Diff for: src/composables/__tests__/useFormValidation.test.ts

@@ -0,0 +1,89 @@
+import { describe, expect, test } from 'vitest'
+import { useFormValidation } from '../useFormValidation'
+import { ref, nextTick } from 'vue'
+
+describe('useFormValidation', () => {
+  const createFormData = (data = {}) => ref({
+    title: '',
+    body: '',
+    userId: '',
+    ...data
+  })
+
+  test('validates title length', async () => {
+    const formData = createFormData({ title: 'ab' })
+    const { errors, touchField } = useFormValidation(formData)
+
+    // Initially no errors (not touched)
+    expect(errors.value.title).toBeUndefined()
+
+    // Touch the field to trigger validation
+    touchField('title')
+    await nextTick()
+    expect(errors.value.title).toBe('Title must be at least 3 characters')
+
+    // Update to valid length
+    formData.value.title = 'abc'
+    touchField('title')
+    await nextTick()
+    expect(errors.value.title).toBeUndefined()
+  })
+
+  test('tracks form validity', async () => {
+    const formData = createFormData()
+    const { isValid, touchAll, setSubmitted } = useFormValidation(formData)
+
+    // Initially valid (no validation yet)
+    expect(isValid.value).toBe(true)
+
+    // Validate all fields
+    touchAll()
+    setSubmitted()
+    await nextTick()
+    expect(isValid.value).toBe(false)
+
+    // Set valid data
+    formData.value = {
+      title: 'Valid Title',
+      body: 'Valid content that is long enough',
+      userId: '1'
+    }
+    touchAll()
+    await nextTick()
+    expect(isValid.value).toBe(true)
+  })
+
+  test('resets validation state', async () => {
+    const formData = createFormData()
+    const { errors, touchField, resetValidation } = useFormValidation(formData)
+
+    // Set up error state
+    touchField('title')
+    await nextTick()
+    expect(errors.value.title).toBe('Title is required')
+
+    // Reset validation
+    resetValidation()
+    await nextTick()
+    expect(errors.value.title).toBeUndefined()
+  })
+
+  test('validates in real-time when fields are touched', async () => {
+    const formData = createFormData()
+    const { errors, touchField } = useFormValidation(formData)
+
+    // Initially no validation
+    expect(errors.value.title).toBeUndefined()
+
+    // Touch field to start validation
+    touchField('title')
+    await nextTick()
+    expect(errors.value.title).toBe('Title is required')
+
+    // Update field and touch again
+    formData.value.title = 'Valid Title'
+    touchField('title')
+    await nextTick()
+    expect(errors.value.title).toBeUndefined()
+  })
+})

Diff for: src/composables/useFormValidation.ts

@@ -1,4 +1,4 @@
-import { ref, computed, watch, type Ref } from "vue";
+import { ref, computed, type Ref } from "vue";
 
 interface FormData {
   title: string;
@@ -54,12 +54,14 @@ export function useFormValidation(formData: Ref<FormData>) {
 
   const touchField = (field: keyof TouchedFields) => {
     touched.value[field] = true;
+    validateForm(); // Only validate when field is touched
   };
 
   const touchAll = () => {
     for (const field of Object.keys(touched.value)) {
       touched.value[field as keyof TouchedFields] = true;
     }
+    validateForm(); // Validate when all fields are touched
   };
 
   const resetValidation = () => {
@@ -74,11 +76,9 @@ export function useFormValidation(formData: Ref<FormData>) {
 
   const setSubmitted = () => {
     isSubmitted.value = true;
-    validateForm();
+    validateForm(); // Validate on form submission
   };
 
-  watch(formData, validateForm, { deep: true });
-
   const isValid = computed(() => Object.keys(errors.value).length === 0);
 
   const visibleErrors = computed(() => ({