"/src/routes/demo.form.address.jsx": "import { createFileRoute } from '@tanstack/react-router'\n\nimport { useAppForm } from '../hooks/demo.form'\n\nexport const Route = createFileRoute('/demo/form')({\n component: AddressForm,\n})\n\nfunction AddressForm() {\n const form = useAppForm({\n defaultValues: {\n fullName: '',\n email: '',\n address: {\n street: '',\n city: '',\n state: '',\n zipCode: '',\n country: '',\n },\n phone: '',\n },\n validators: {\n onBlur: ({ value }) => {\n const errors = {\n fields: {},\n } as {\n fields: Record<string, string>\n }\n if (value.fullName.trim().length === 0) {\n errors.fields.fullName = 'Full name is required'\n }\n return errors\n },\n },\n onSubmit: ({ value }) => {\n console.log(value)\n // Show success message\n alert('Form submitted successfully!')\n },\n })\n\n return (\n <div\n className=\"flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 to-blue-100 p-4 text-white\"\n style={{\n backgroundImage:\n 'radial-gradient(50% 50% at 5% 40%, #f4a460 0%, #8b4513 70%, #1a0f0a 100%)',\n }}\n >\n <div className=\"w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10\">\n <form\n onSubmit={(e) => {\n e.preventDefault()\n e.stopPropagation()\n form.handleSubmit()\n }}\n className=\"space-y-6\"\n >\n <form.AppField name=\"fullName\">\n {(field) => <field.TextField label=\"Full Name\" />}\n </form.AppField>\n\n <form.AppField\n name=\"email\"\n validators={{\n onBlur: ({ value }) => {\n if (!value || value.trim().length === 0) {\n return 'Email is required'\n }\n if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,}$/i.test(value)) {\n return 'Invalid email address'\n }\n return undefined\n },\n }}\n >\n {(field) => <field.TextField label=\"Email\" />}\n </form.AppField>\n\n <form.AppField\n name=\"address.street\"\n validators={{\n onBlur: ({ value }) => {\n if (!value || value.trim().length === 0) {\n return 'Street address is required'\n }\n return undefined\n },\n }}\n >\n {(field) => <field.TextField label=\"Street Address\" />}\n </form.AppField>\n\n <div className=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\n <form.AppField\n name=\"address.city\"\n validators={{\n onBlur: ({ value }) => {\n if (!value || value.trim().length === 0) {\n return 'City is required'\n }\n return undefined\n },\n }}\n >\n {(field) => <field.TextField label=\"City\" />}\n </form.AppField>\n <form.AppField\n name=\"address.state\"\n validators={{\n onBlur: ({ value }) => {\n if (!value || value.trim().length === 0) {\n return 'State is required'\n }\n return undefined\n },\n }}\n >\n {(field) => <field.TextField label=\"State\" />}\n </form.AppField>\n <form.AppField\n name=\"address.zipCode\"\n validators={{\n onBlur: ({ value }) => {\n if (!value || value.trim().length === 0) {\n return 'Zip code is required'\n }\n if (!/^\\d{5}(-\\d{4})?$/.test(value)) {\n return 'Invalid zip code format'\n }\n return undefined\n },\n }}\n >\n {(field) => <field.TextField label=\"Zip Code\" />}\n </form.AppField>\n </div>\n\n <form.AppField\n name=\"address.country\"\n validators={{\n onBlur: ({ value }) => {\n if (!value || value.trim().length === 0) {\n return 'Country is required'\n }\n return undefined\n },\n }}\n >\n {(field) => (\n <field.Select\n label=\"Country\"\n values={[\n { label: 'United States', value: 'US' },\n { label: 'Canada', value: 'CA' },\n { label: 'United Kingdom', value: 'UK' },\n { label: 'Australia', value: 'AU' },\n { label: 'Germany', value: 'DE' },\n { label: 'France', value: 'FR' },\n { label: 'Japan', value: 'JP' },\n ]}\n placeholder=\"Select a country\"\n />\n )}\n </form.AppField>\n\n <form.AppField\n name=\"phone\"\n validators={{\n onBlur: ({ value }) => {\n if (!value || value.trim().length === 0) {\n return 'Phone number is required'\n }\n if (\n !/^(\\+\\d{1,3})?\\s?\\(?\\d{3}\\)?[\\s.-]?\\d{3}[\\s.-]?\\d{4}$/.test(\n value,\n )\n ) {\n return 'Invalid phone number format'\n }\n return undefined\n },\n }}\n >\n {(field) => (\n <field.TextField label=\"Phone\" placeholder=\"123-456-7890\" />\n )}\n </form.AppField>\n\n <div className=\"flex justify-end\">\n <form.AppForm>\n <form.SubscribeButton label=\"Submit\" />\n </form.AppForm>\n </div>\n </form>\n </div>\n </div>\n )\n}\n",
0 commit comments