boost_web_forms_contact_form_with_validation_and_submit.ts

1import { createForm } from '@boost-web/forms';
2
3// Define the shape of your form data
4interface ContactForm {
5  name: string;
6  email: string;
7  message: string;
8}
9
10// Initialize the form
11const form = createForm<ContactForm>({
12  initialValues: {
13    name: '',
14    email: '',
15    message: '',
16  },
17  validate: (values) => {
18    const errors: Partial<Record<keyof ContactForm, string>> = {};
19    if (!values.name) errors.name = 'Name is required';
20    if (!values.email.includes('@')) errors.email = 'Invalid email address';
21    return errors;
22  },
23  onSubmit: async (values) => {
24    console.log('Form submitted successfully:', values);
25    // Add your API call logic here
26  },
27});
28
29// Example of manual interaction (typically used within a framework integration)
30form.setFieldValue('name', 'John Doe');
31form.submit();