How Do You Handle Client-Side Validation in the New Inertia Form Component

But what’s the recommended or most elegant pattern for validating fields on the client—things like required fields, email format checks, or real-time input validation—before hitting the server?

@nicholasnet By using the native types and attributes for those things?

<!-- Required input -->
<input required>

<!-- Email input -->
<input type="email">

You can also use Precognition for doing asynchronous validation on inputs: https://laravel.com/docs/precognition#using-vue-and-inertia

I've been trying to implement tanstack from shadcn but had issues with displaying errors returned from failed validation by laravel so ended up with useForm from Inertia and zod for client-side. Works like a charm. Here you are:

import * as z from 'zod';

rules:

...
const LessonSchema = z.object({
    title: z
        .string()
        .min(5, 'Title must be at least 5 characters.')
        .max(10, 'Title must be at most 32 characters.')
    description: z
        .string()
        .min(20, 'Description must be at least 20 characters.')
        .max(100, 'Description must be at most 100 characters.'),
});

later in the form component closure

   // Local state for Zod validation errors (client-side only)
    const [clientErrors, setClientErrors] = useState<ClientErrors>({});

    // Function to perform client-side validation using Zod
    const validateData = (formData: LessonFormData): boolean => {
        setClientErrors({});

        const result = LessonSchema.safeParse(formData);

        if (!result.success) {
            const newErrors: ClientErrors = {};

            // Map Zod errors to our simple ClientErrors structure
            result.error.issues.forEach((issue) => {
                const path = issue.path[0] as keyof LessonFormData;
                if (path) {
                    newErrors[path] = issue.message;
                }
            });

            setClientErrors(newErrors);
            return false; // Validation failed
        }

        return true; // Validation passed
    };

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        clearErrors();

        // client-side validation
        if (!validateData(data)) {
            // Validation failed. Stop submission and display clientErrors.
            toast.error('Please fix the errors in the form.');
            return;
        }

        post(storeRoute, {
            onSuccess: () => {
                toast.success('Lesson created successfully!');
                // Reset form on successful submission
                reset();
            },
            // Inertia's onError handles Laravel's validation errors (backend)
            onError: (serverErrors) => {
                console.error('Backend validation failed:', serverErrors);
                toast.error('A server validation error occurred.');
            },
        });
    };

    // Combine client and server errors for display. Client errors take precedence.
    const getError = (fieldName: keyof LessonFormData): string | undefined => {
        return clientErrors[fieldName] || errors[fieldName];
    };

    const isError = (fieldName: keyof LessonFormData): boolean => {
        return !!getError(fieldName);
    };

form fields

 <div>
                            <label htmlFor="title" className="mb-1 block text-sm font-medium text-gray-700">
                                Title
                            </label>
                            <input
                                type="text"
                                id="title"
                                value={data.title}
                                // Clear client-side error when user starts typing
                                onChange={(e) => {
                                    setData('title', e.target.value);
                                    if (clientErrors.title) {
                                        setClientErrors((prev) => ({ ...prev, title: undefined }));
                                    }
                                }}
                                className={`w-full rounded-lg border p-3 shadow-sm transition duration-150 ${
                                    isError('title')
                                        ? 'border-red-500 focus:ring-red-500'
                                        : 'border-gray-300 focus:ring-green-500'
                                }`}
                                onBlur={() => validateData(data)} // Validate on blur for immediate feedback
                            />
                            {getError('title') && <p className="mt-1 text-sm text-red-600">{getError('title')}</p>}
                        </div>