react_laravel_precognition_form_realtime_validation.ts

1import { useForm } from 'laravel-precognition-react';
2
3export default function CreateUserForm() {
4    const form = useForm('post', '/users', {
5        name: '',
6        email: '',
7    });
8
9    const submit = (e: React.FormEvent) => {
10        e.preventDefault();
11
12        form.submit();
13    };
14
15    return (
16        <form onSubmit={submit}>
17            <label htmlFor="name">Name</label>
18            <input
19                id="name"
20                value={form.data.name}
21                onChange={(e) => form.setData('name', e.target.value)}
22                onBlur={() => form.validate('name')}
23            />
24            {form.invalid('name') && <div>{form.errors.name}</div>}
25
26            <label htmlFor="email">Email</label>
27            <input
28                id="email"
29                value={form.data.email}
30                onChange={(e) => form.setData('email', e.target.value)}
31                onBlur={() => form.validate('email')}
32            />
33            {form.invalid('email') && <div>{form.errors.email}</div>}
34
35            <button disabled={form.processing}>
36                Create User
37            </button>
38        </form>
39    );
40}