react_boost_forms_useform_hook_quickstart_with_validation.ts

1import React from 'react';
2import { useForm } from 'boost-forms';
3
4interface MyFormData {
5  username: string;
6  email: string;
7}
8
9const QuickstartForm: React.FC = () => {
10  const { register, handleSubmit, errors } = useForm<MyFormData>({
11    initialValues: {
12      username: '',
13      email: '',
14    },
15    validate: (values) => {
16      const errors: Partial<Record<keyof MyFormData, string>> = {};
17      if (!values.username) {
18        errors.username = 'Username is required';
19      }
20      if (!values.email.includes('@')) {
21        errors.email = 'Invalid email address';
22      }
23      return errors;
24    },
25    onSubmit: (values) => {
26      console.log('Form Submitted:', values);
27    },
28  });
29
30  return (
31    <form onSubmit={handleSubmit}>
32      <div>
33        <label htmlFor="username">Username:</label>
34        <input {...register('username')} id="username" />
35        {errors.username && <span style={{ color: 'red' }}>{errors.username}</span>}
36      </div>
37
38      <div>
39        <label htmlFor="email">Email:</label>
40        <input {...register('email')} id="email" />
41        {errors.email && <span style={{ color: 'red' }}>{errors.email}</span>}
42      </div>
43
44      <button type="submit">Submit</button>
45    </form>
46  );
47};
48
49export default QuickstartForm;