How do I validate form fields?

Be specific about the rules

"Validate the form" is too vague to produce reliable results. Name each field's rule:

On the sign-up form: name is required (2-50 characters), email must be a valid email address, password must be at least 8 characters with one number. Show inline error messages under each field as the user types or on blur.

Lovable typically implements this with a schema validation library (such as Zod) paired with a form library (React Hook Form) — you don't need to name these, but it helps to know the errors you see will reference them.

Client-side vs server-side

Layer	Purpose	Trust level
Client-side (in the browser)	Instant feedback, better UX	Can be bypassed — never trust alone
Server-side (in the function/database)	Actual data integrity and security	Must always be enforced

Always ask for both:

Also enforce the same validation rules server-side before inserting into the database, in case the client-side check is bypassed.

Common validation patterns to ask for

• Required fields with clear inline messages
• Email format checks
• Minimum/maximum length
• Matching fields (e.g. confirm password)
• Numeric ranges (e.g. quantity between 1 and 100)
• File type/size limits for uploads (see how do I upload files through a form)

What usually goes wrong

• Only client-side validation: without server-side enforcement, malicious or malformed data can still reach your database via direct API calls.
• Vague error messages: "Invalid input" tells users nothing — ask for specific messages ("Enter a valid email address").
• Validating on every keystroke: this can feel aggressive; validating on blur or submit is usually friendlier, unless you specifically want live feedback (e.g. password strength).

If you're building something with real user data (signups, payments), have Lovable double-check that server-side (database or edge function) validation genuinely mirrors the client-side rules, not just assume it does.