Build AI-Powered Form Validation Với LLM: Vượt Xa Regex Truyền Thống

Regex validation chỉ check format — email đúng pattern chưa nói gì về nội dung. LLM validation có thể hiểu context: "địa chỉ này có hợp lệ không?", "comment này có toxic không?", "mô tả sản phẩm này có đủ chi tiết không?". Đây là next level form validation.

Khi nào cần AI Validation?

Không phải mọi field đều cần AI. Dùng AI validation cho:

• Free-text inputs cần quality check (reviews, descriptions, bios)
• Address validation (format + logic)
• Content moderation (profanity, spam, harmful content)
• Business logic validation ("delivery date phải sau ngày order")

Implementation: AI Validation Hook

// hooks/use-ai-validation.ts
"use client";
import { useState, useCallback } from "react";

interface ValidationResult {
  isValid: boolean;
  message: string;
  suggestions?: string[];
}

export function useAIValidation(fieldType: string) {
  const [result, setResult] = useState<ValidationResult | null>(null);
  const [validating, setValidating] = useState(false);

  const validate = useCallback(async (value: string) => {
    if (!value.trim()) {
      setResult(null);
      return;
    }

    setValidating(true);
    try {
      const res = await fetch("/api/validate", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ value, fieldType }),
      });
      const data: ValidationResult = await res.json();
      setResult(data);
    } catch {
      setResult({ isValid: true, message: "" }); // Fallback: allow submission
    } finally {
      setValidating(false);
    }
  }, [fieldType]);

  return { validate, result, validating };
}

Server-side: Validation API Route

// app/api/validate/route.ts
import { generateObject } from "ai";
import { openai } from "@ai-sdk/openai";
import { z } from "zod";

const validationSchema = z.object({
  isValid: z.boolean(),
  message: z.string(),
  suggestions: z.array(z.string()).optional(),
});

const PROMPTS: Record<string, string> = {
  productDescription: "Validate this product description. Check: minimum 20 words, descriptive enough for buyers, no spam/promotional abuse.",
  review: "Validate this review. Check: genuine feedback (not spam), no profanity, constructive.",
  address: "Validate this Vietnamese address. Check: has street, ward/district, city/province.",
};

export async function POST(req: Request) {
  const { value, fieldType } = await req.json();
  const systemPrompt = PROMPTS[fieldType] || "Validate this input for quality and appropriateness.";

  const { object } = await generateObject({
    model: openai("gpt-4o-mini"),
    schema: validationSchema,
    system: systemPrompt,
    prompt: value,
  });

  return Response.json(object);
}

UX Considerations

• Debounce: Validate on blur hoặc sau 500ms idle, không phải mỗi keystroke — tốn tiền và laggy
• Graceful fallback: Nếu AI API fail, allow submission thay vì block user
• Visual feedback: Show subtle loading indicator khi đang validate, không block form interaction
• Cost control: Dùng gpt-4o-mini cho validation — rẻ hơn 10x so với gpt-4o và đủ accurate
• Combine với traditional validation: Check format bằng Zod trước, chỉ gọi AI cho semantic validation

Kết luận

AI validation là complement chứ không phải replacement cho traditional validation. Layer approach: Zod/regex cho format → AI cho semantics. Đặc biệt powerful cho content-heavy forms như product listings, user profiles, hay review systems.