Form validation is added by creating a small validation module, wiring it into the form component (client-side immediate feedback + submit-time gate), and duplicating the same checks on the server endpoint so invalid requests are rejected. Paste the prompts below into Lovable Chat Mode to make those exact changes.

Add a small validation library (client + server)

Paste this prompt into Lovable. It will create a reusable validator at src/lib/validation.ts.

// Please create file src/lib/validation.ts with the following TypeScript code.
// This is pure TypeScript/JavaScript and requires no extra packages.
// Export functions for reuse in components and API routes.

export type ValidationResult = {
  ok: boolean
  errors: Record<string, string>
}

export function validateContactForm(data: { name?: string; email?: string; message?: string }): ValidationResult {
  const errors: Record<string, string> = {}

  // Name: required, min 2 chars
  if (!data.name || !data.name.trim()) {
    errors.name = 'Name is required.'
  } else if (data.name.trim().length < 2) {
    errors.name = 'Name must be at least 2 characters.'
  }

  // Email: very small regexp for format
  if (!data.email || !data.email.trim()) {
    errors.email = 'Email is required.'
  } else {
    const email = data.email.trim()
    const emailRe = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    if (!emailRe.test(email)) {
      errors.email = 'Email address is invalid.'
    }
  }

  // Message: required, min 10 chars
  if (!data.message || !data.message.trim()) {
    errors.message = 'Message is required.'
  } else if (data.message.trim().length < 10) {
    errors.message = 'Message must be at least 10 characters.'
  }

  return { ok: Object.keys(errors).length === 0, errors }
}

Wire validation into the React form component

Paste this prompt into Lovable. It will update or create src/components/ContactForm.tsx. The component does inline validation, shows field-level errors, disables submit when invalid, and sends JSON to an API route.

// Please create or replace file src/components/ContactForm.tsx with the following React+TypeScript code.
// The component uses the validation helper at src/lib/validation.ts created earlier.

import React, { useState } from 'react'
import { validateContactForm } from '../lib/validation'

export default function ContactForm() {
  const [form, setForm] = useState({ name: '', email: '', message: '' })
  const [errors, setErrors] = useState<Record<string, string>>({})
  const [touched, setTouched] = useState<Record<string, boolean>>({})
  const [submitting, setSubmitting] = useState(false)
  const [serverError, setServerError] = useState<string | null>(null)
  const [success, setSuccess] = useState(false)

  function handleChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
    const { name, value } = e.target
    setForm(prev => ({ ...prev, [name]: value }))
    if (touched[name]) {
      const result = validateContactForm({ ...form, [name]: value })
      setErrors(result.errors)
    }
  }

  function handleBlur(e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) {
    const { name } = e.target
    setTouched(prev => ({ ...prev, [name]: true }))
    const result = validateContactForm(form)
    setErrors(result.errors)
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setServerError(null)
    const result = validateContactForm(form)
    setErrors(result.errors)
    setTouched({ name: true, email: true, message: true })
    if (!result.ok) return
    setSubmitting(true)
    try {
      const resp = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      })
      if (!resp.ok) {
        const json = await resp.json().catch(() => ({ message: 'Unknown server error' }))
        setServerError(json?.message || 'Server returned an error')
      } else {
        setSuccess(true)
        setForm({ name: '', email: '', message: '' })
        setTouched({})
      }
    } catch (err) {
      setServerError('Network error')
    } finally {
      setSubmitting(false)
    }
  }

  return (
    <form onSubmit={handleSubmit} noValidate>
      <div>
        <label>Name</label>
        <input name="name" value={form.name} onChange={handleChange} onBlur={handleBlur} />
        {touched.name && errors.name && <div style={{ color: 'red' }}>{errors.name}</div>}
      </div>

      <div>
        <label>Email</label>
        <input name="email" value={form.email} onChange={handleChange} onBlur={handleBlur} />
        {touched.email && errors.email && <div style={{ color: 'red' }}>{errors.email}</div>}
      </div>

      <div>
        <label>Message</label>
        <textarea name="message" value={form.message} onChange={handleChange} onBlur={handleBlur} />
        {touched.message && errors.message && <div style={{ color: 'red' }}>{errors.message}</div>}
      </div>

      {serverError && <div style={{ color: 'red' }}>{serverError}</div>}
      {success && <div style={{ color: 'green' }}>Message sent.</div>}

      <button type="submit" disabled={submitting || Object.keys(errors).length > 0}>
        {submitting ? 'Sending…' : 'Send'}
      </button>
    </form>
  )
}

Add server-side validation to the API route

Paste this prompt into Lovable. It will create src/pages/api/contact.ts (Next.js style) and use the same validator to reject bad requests on the server.

// Please create file src/pages/api/contact.ts with the following code.
// If your app is not Next.js, adapt the path to your framework's API route convention.

import { NextApiRequest, NextApiResponse } from 'next'
import { validateContactForm } from '../../lib/validation'

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method !== 'POST') {
    return res.status(405).json({ message: 'Method not allowed' })
  }
  const data = req.body
  const result = validateContactForm(data)
  if (!result.ok) {
    return res.status(400).json({ message: 'Validation failed', errors: result.errors })
  }

  // TODO: send email / save to DB. Keep this placeholder synchronous so no extra secrets/config here.
  // If you integrate an external service (SendGrid, Supabase), set credentials in Lovable Secrets UI.
  return res.status(200).json({ message: 'ok' })
}

Preview and optional GitHub export

• After pasting each prompt, use Lovable's Preview to click through the form and check inline validation and submit flows.
• If you need third-party libraries (zod, yup) or server SDKs, export/sync to GitHub via Lovable and perform npm installs locally or in CI. That is outside Lovable (terminal required).

Centralize your validation schemas, run the same checks on the client and server, show immediate field-level feedback, keep error messages friendly and localizable, and use Lovable’s Chat Mode edits + Preview/Publish (or GitHub sync when you need package installs) to make these changes. Use a type-safe schema library like zod when possible — or add a tiny shared runtime validator if you cannot add packages — and always validate again on the server API route before persisting data.

Lovable prompts to implement best practices

• Central schema (zod) — add dependency and schema file

Please edit package.json to add zod, then create a centralized schema file. In Lovable Chat Mode make these edits:

• Update package.json: add "zod": "^4" to dependencies.
• Create src/lib/validation.ts with the schema.

Paste this into Lovable:

// Update package.json (add zod dependency)
edit package.json
// Replace or merge into "dependencies": { ... } adding "zod": "^4.30.0"

// Create new file src/lib/validation.ts
create file src/lib/validation.ts
// Use zod to define shared schemas and strongly-typed inputs
import { z } from "zod";

export const ContactSchema = z.object({
  name: z.string().min(2, "Please enter your name"),
  email: z.string().email("Enter a valid email"),
  message: z.string().min(10, "Message must be at least 10 characters"),
});

export type ContactInput = z.infer<typeof ContactSchema>;

// Export a parse function for server-safe checks
export function validateContact(data: unknown) {
  return ContactSchema.safeParse(data); // returns { success: boolean, ... }
}

// After edits, use Preview to confirm and Publish to trigger install/build (no terminal required)

 

<ul>

  <li><b>Client: immediate, accessible field-level validation</b></li>

</ul>

Tell Lovable to update your React form component to use the shared schema for live validation and to show per-field errors. Example change:

// Update src/components/ContactForm.tsx
edit src/components/ContactForm.tsx
// Replace the existing form logic with a controlled form that validates onBlur/onChange using ContactSchema

import React, { useState } from "react";
import { ContactSchema, ContactInput } from "../lib/validation";

export default function ContactForm() {
const [values, setValues] = useState({ name: "", email: "", message: "" });
const [errors, setErrors] = useState<Record<string,string>>({});
const [submitting, setSubmitting] = useState(false);

function validateField(field: keyof ContactInput, value: string) {
const result = ContactSchema.pick({ [field]: true }).safeParse({ [field]: value });
return result.success ? "" : result.error.errors[0].message;
}

function handleChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
const { name, value } = e.target;
setValues(v => ({ ...v, [name]: value }));
// optional live validation
setErrors(err => ({ ...err, [name]: validateField(name as any, value) }));
}

async function handleSubmit(e: React.FormEvent) {
e.preventDefault();
// full-client parse before submit to show user errors
const parse = ContactSchema.safeParse(values);
if (!parse.success) {
const next: Record<string,string> = {};
for (const err of parse.error.errors) {
next[err.path[0] as string] = err.message;
}
setErrors(next);
return;
}
setSubmitting(true);
// send to server
await fetch("/api/contact", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(values) });
setSubmitting(false);
}

return (
// // Render form with aria-invalid and friendly messages
);
}

// Use Preview to verify behavior and accessibility attributes

• Server: always re-validate in your API route

Edit your server API endpoint to import validateContact and reject bad payloads. Example for Next.js API route:

// Update src/pages/api/contact.ts  (or app/api/contact/route.ts if using app router)
edit src/pages/api/contact.ts
create or replace file src/pages/api/contact.ts

import type { NextApiRequest, NextApiResponse } from "next";
import { validateContact } from "../../lib/validation";

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method !== "POST") return res.status(405).end();
  const parsed = validateContact(req.body);
  if (!parsed.success) {
    return res.status(400).json({ errors: parsed.error.errors });
  }
  // // proceed to persist using parsed.data
  return res.status(200).json({ ok: true });
}

// Preview and test the API via the app UI; publish to deploy server-side check

 

<ul>

  <li><b>Fallback minimal shared validator (no new deps)</b></li>

</ul>

If adding zod is not possible, ask Lovable to create a small shared runtime helper:

// Create src/lib/simpleValidation.ts
create file src/lib/simpleValidation.ts

export function validateContactSimple(data: any) {
const errors: Record<string,string> = {};
if (!data?.name || data.name.length < 2) errors.name = "Please enter your name";
if (!data?.email || !/^\S+@\S+.\S+$/.test(data.email)) errors.email = "Enter a valid email";
if (!data?.message || data.message.length < 10) errors.message = "Message must be at least 10 characters";
return { valid: Object.keys(errors).length === 0, errors };
}

// Then wire this same helper into the client form and server API as above

Notes and Lovable workflow tips

• Use Chat Mode edits and file diffs, not terminal commands — modify package.json, components, and API routes directly inside Lovable.
• Preview before Publish to confirm UI validation flows and accessibility attributes.
• Secrets UI only for keys — do not store validation rules as secrets. If you need to run migrations or install packages outside Lovable, use GitHub export/sync and run build commands locally or in CI (this is outside Lovable).
• Keep messages localizable by centralizing error strings in the validation file so UI can display friendly text.