Stop Fighting SvelteKit v5.2 Form Validation - Fix It with AI in 30 Minutes

npm install sveltekit-superforms zod @ai-sdk/openai openai
npm install -D @types/node

// lib/schemas/user-schema.ts
import { z } from 'zod';

// AI-enhanced validation schema
export const userSchema = z.object({
  email: z
    .string()
    .min(1, "Email is required")
    .email("Please enter a valid email")
    .refine(async (email) => {
      // AI validation for suspicious email patterns
      return await validateEmailWithAI(email);
    }, "This email appears to be invalid or suspicious"),
  
  name: z
    .string()
    .min(1, "Name is required")
    .max(50, "Name must be less than 50 characters")
    .refine((name) => {
      // Handle emoji and special characters gracefully
      const cleanName = name.replace(/[\u{1F600}-\u{1F64F}]|[\u{1F300}-\u{1F5FF}]|[\u{1F680}-\u{1F6FF}]|[\u{1F1E0}-\u{1F1FF}]/gu, '');
      return cleanName.length >= 2;
    }, "Name must contain at least 2 regular characters"),
  
  message: z
    .string()
    .min(10, "Message must be at least 10 characters")
    .max(1000, "Message must be less than 1000 characters")
    .refine(async (message) => {
      // AI content moderation
      return await moderateContentWithAI(message);
    }, "Message contains inappropriate content")
});

export type UserSchema = typeof userSchema;

// AI validation helpers
async function validateEmailWithAI(email: string): Promise<boolean> {
  // Skip AI validation in development
  if (import.meta.env.DEV) return true;
  
  try {
    const response = await openai.chat.completions.create({
      model: "gpt-3.5-turbo",
      messages: [{
        role: "system",
        content: "You are an email validator. Return 'valid' for legitimate emails, 'invalid' for suspicious ones like temporary emails, disposable addresses, or obvious fake emails."
      }, {
        role: "user", 
        content: `Is this email legitimate: ${email}`
      }],
      max_tokens: 10
    });
    
    return response.choices[0]?.message?.content?.toLowerCase().includes('valid') ?? true;
  } catch {
    // Fail gracefully - don't block users if AI is down
    return true;
  }
}

async function moderateContentWithAI(content: string): Promise<boolean> {
  if (import.meta.env.DEV) return true;
  
  try {
    const response = await openai.moderations.create({
      input: content
    });
    
    return !response.results[0]?.flagged;
  } catch {
    return true; // Fail open for better UX
  }
}

// routes/contact/+page.server.ts
import { fail, redirect } from '@sveltejs/kit';
import { superValidate } from 'sveltekit-superforms';
import { zod } from 'sveltekit-superforms/adapters';
import { userSchema } from '$lib/schemas/user-schema.js';
import type { PageServerLoad, Actions } from './$types';

export const load: PageServerLoad = async () => {
  const form = await superValidate(zod(userSchema));
  return { form };
};

export const actions: Actions = {
  default: async ({ request, getClientAddress }) => {
    const form = await superValidate(request, zod(userSchema));
    
    // This is the part that breaks in most tutorials
    if (!form.valid) {
      console.log('Validation errors:', form.errors);
      return fail(400, { form });
    }

    try {
      // AI-enhanced spam detection
      const isSpam = await detectSpamWithAI(form.data, getClientAddress());
      
      if (isSpam) {
        return fail(429, { 
          form,
          message: "Please try again later"
        });
      }

      // Process the form data
      await processUserSubmission(form.data);
      
      // Use redirect for successful submissions
      throw redirect(303, '/contact/success');
      
    } catch (error) {
      console.error('Form processing error:', error);
      
      // AI-generated user-friendly error messages
      const friendlyMessage = await generateFriendlyError(error);
      
      return fail(500, { 
        form,
        message: friendlyMessage || "Something went wrong. Please try again."
      });
    }
  }
};

async function detectSpamWithAI(data: any, clientIP: string): Promise<boolean> {
  // Simple rate limiting + AI analysis
  const recentSubmissions = await getRecentSubmissions(clientIP);
  
  if (recentSubmissions > 5) return true;
  
  try {
    const response = await openai.chat.completions.create({
      model: "gpt-3.5-turbo",
      messages: [{
        role: "system",
        content: "Analyze this form submission for spam indicators. Reply only 'SPAM' or 'LEGITIMATE'"
      }, {
        role: "user",
        content: `Email: ${data.email}\nName: ${data.name}\nMessage: ${data.message}`
      }],
      max_tokens: 10
    });
    
    return response.choices[0]?.message?.content?.includes('SPAM') ?? false;
  } catch {
    return false;
  }
}

async function generateFriendlyError(error: unknown): Promise<string> {
  const errorMessage = error instanceof Error ? error.message : 'Unknown error';
  
  try {
    const response = await openai.chat.completions.create({
      model: "gpt-3.5-turbo",
      messages: [{
        role: "system",
        content: "Convert this technical error into a friendly, non-technical message for users. Be helpful but not alarming."
      }, {
        role: "user",
        content: errorMessage
      }],
      max_tokens: 50
    });
    
    return response.choices[0]?.message?.content || "Please try again";
  } catch {
    return "Please try again";
  }
}

<!-- routes/contact/+page.svelte -->
<script lang="ts">
  import { superForm } from 'sveltekit-superforms';
  import { zodClient } from 'sveltekit-superforms/adapters';
  import { userSchema } from '$lib/schemas/user-schema.js';
  import SuperDebug from 'sveltekit-superforms';
  import type { PageData } from './$types';
  
  export let data: PageData;

  const { form, errors, enhance, constraints, delayed, message } = superForm(data.form, {
    validators: zodClient(userSchema),
    
    // AI-powered real-time validation
    validationMethod: 'oninput',
    
    // Better error handling
    onError: ({ result, message }) => {
      console.error('Form error:', result);
      message.set('Something went wrong. Please try again.');
    },
    
    // Smart success handling  
    onResult: ({ result }) => {
      if (result.type === 'redirect') {
        // SvelteKit will handle the redirect
        return;
      }
    }
  });

  // AI-powered input suggestions
  let emailSuggestions: string[] = [];
  
  async function getSuggestions(email: string) {
    if (email.length < 3) return;
    
    try {
      const response = await fetch('/api/email-suggestions', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email })
      });
      
      emailSuggestions = await response.json();
    } catch {
      // Fail silently for suggestions
    }
  }
</script>

<div class="max-w-md mx-auto mt-8 p-6 bg-white rounded-lg shadow-lg">
  <h1 class="text-2xl font-bold mb-6 text-gray-800">Contact Us</h1>
  
  <!-- Display server messages -->
  {#if $message}
    <div class="mb-4 p-3 bg-blue-50 border border-blue-200 rounded text-blue-700">
      {$message}
    </div>
  {/if}

  <form method="POST" use:enhance class="space-y-4">
    <!-- Email field with AI suggestions -->
    <div>
      <label for="email" class="block text-sm font-medium text-gray-700 mb-1">
        Email
      </label>
      <input
        id="email"
        name="email"
        type="email"
        bind:value={$form.email}
        on:input={(e) => getSuggestions(e.currentTarget.value)}
        {...$constraints.email}
        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500
               {$errors.email ? 'border-red-500' : ''}"
        aria-describedby={$errors.email ? 'email-error' : undefined}
      />
      
      <!-- AI-powered email suggestions -->
      {#if emailSuggestions.length > 0}
        <div class="mt-1 text-xs text-gray-500">
          Did you mean: 
          {#each emailSuggestions as suggestion}
            <button
              type="button"
              class="text-blue-600 hover:underline ml-1"
              on:click={() => $form.email = suggestion}
            >
              {suggestion}
            </button>
          {/each}
        </div>
      {/if}
      
      {#if $errors.email}
        <p id="email-error" class="mt-1 text-xs text-red-600">
          {$errors.email[0]}
        </p>
      {/if}
    </div>

    <!-- Name field -->
    <div>
      <label for="name" class="block text-sm font-medium text-gray-700 mb-1">
        Name
      </label>
      <input
        id="name"
        name="name"
        type="text"
        bind:value={$form.name}
        {...$constraints.name}
        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500
               {$errors.name ? 'border-red-500' : ''}"
        aria-describedby={$errors.name ? 'name-error' : undefined}
      />
      {#if $errors.name}
        <p id="name-error" class="mt-1 text-xs text-red-600">
          {$errors.name[0]}
        </p>
      {/if}
    </div>

    <!-- Message field -->
    <div>
      <label for="message" class="block text-sm font-medium text-gray-700 mb-1">
        Message
      </label>
      <textarea
        id="message"
        name="message"
        rows="4"
        bind:value={$form.message}
        {...$constraints.message}
        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500
               {$errors.message ? 'border-red-500' : ''}"
        aria-describedby={$errors.message ? 'message-error' : undefined}
      ></textarea>
      {#if $errors.message}
        <p id="message-error" class="mt-1 text-xs text-red-600">
          {$errors.message[0]}
        </p>
      {/if}
    </div>

    <button
      type="submit"
      disabled={$delayed}
      class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
    >
      {$delayed ? 'Sending...' : 'Send Message'}
    </button>
  </form>

  <!-- Debug component (remove in production) -->
  {#if import.meta.env.DEV}
    <div class="mt-8">
      <SuperDebug data={$form} />
    </div>
  {/if}
</div>

// routes/api/email-suggestions/+server.ts
import { json } from '@sveltejs/kit';
import type { RequestHandler } from './$types';

export const POST: RequestHandler = async ({ request }) => {
  try {
    const { email } = await request.json();
    
    // Common typos and corrections
    const suggestions = await generateEmailSuggestions(email);
    
    return json(suggestions);
  } catch {
    return json([]);
  }
};

async function generateEmailSuggestions(email: string): Promise<string[]> {
  // Simple domain corrections first
  const commonDomains = ['gmail.com', 'yahoo.com', 'hotmail.com', 'outlook.com'];
  const [username, domain] = email.split('@');
  
  if (!username || !domain) return [];
  
  const suggestions: string[] = [];
  
  // Check for common domain typos
  const domainSuggestions = commonDomains.filter(d => 
    d.includes(domain) || domain.includes(d.slice(0, -4))
  );
  
  suggestions.push(...domainSuggestions.map(d => `${username}@${d}`));
  
  // AI-powered suggestions for complex cases
  if (suggestions.length === 0) {
    try {
      const response = await openai.chat.completions.create({
        model: "gpt-3.5-turbo",
        messages: [{
          role: "system",
          content: "Suggest up to 2 corrected email addresses for common typos. Only suggest real, common email domains. Return as JSON array."
        }, {
          role: "user",
          content: `Email with possible typo: ${email}`
        }],
        max_tokens: 100
      });
      
      const aiSuggestions = JSON.parse(response.choices[0]?.message?.content || '[]');
      suggestions.push(...aiSuggestions);
    } catch {
      // Fall back to basic suggestions
    }
  }
  
  return suggestions.slice(0, 2); // Limit to 2 suggestions
}