Validation

Detailed Explanation

Validation is the process of checking that data meets your rules before saving it to the Database. It prevents bad data from being stored — like empty posts, invalid emails, or titles that are too long.

There are two levels of validation:

Client-side validation happens in the browser before the form even submits. HTML attributes like required, minlength, and type="email" provide basic checks. This gives instant feedback but can be bypassed.

Server-side validation happens in your action Function after the Form submits. This is the validation that truly matters because it can't be bypassed:

export async function action({ request }) {
  const formData = await request.formData();
  const title = formData.get('title');
  if (!title || title.trim() === '') {
    return { error: "Title is required" };
  }
  // Save to database...
}

The pattern is: validate first, save second. If validation fails, return an error object. The Component uses useActionData to display the error message to the user without leaving the page.

Common validations include: required fields aren't empty, text length is within limits, emails match the right format, numbers are within range, and data doesn't duplicate existing records. Claude Code can generate comprehensive validation for any form when you describe your rules.