colin/redwood-tutorial
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix import on useForm + validate e-mail

Browse Source
This commit is contained in:
Francesco Manzali
2021-10-19 10:43:42 +02:00
parent 617b60adca
commit eaeb432fe6
1 changed files with 71 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
web/src/pages/ContactPage/ContactPage.js
View File

@@ -6,10 +6,10 @@ import {
FieldError, FieldError,
Label, Label,
FormError, FormError,
useForm,
} from '@redwoodjs/forms' } from '@redwoodjs/forms'
import { useMutation } from '@redwoodjs/web' import { useMutation } from '@redwoodjs/web'
import { toast, Toaster } from '@redwoodjs/web/toast' import { toast, Toaster } from '@redwoodjs/web/toast'
import { useForm } from 'react-hook-form'
const CREATE_CONTACT = gql` const CREATE_CONTACT = gql`
mutation CreateContactMutation($input: CreateContactInput!) { mutation CreateContactMutation($input: CreateContactInput!) {
@@ -34,75 +34,81 @@ const ContactPage = () => {
console.log(data) console.log(data)
} }
return <> return (
<Toaster /> <>
<Form <Toaster />
onSubmit={onSubmit} <Form
config={{ mode: 'onBlur' }} onSubmit={onSubmit}
error={error} config={{ mode: 'onBlur' }}
formMethods={formMethods}
>
<FormError
error={error} error={error}
wrapperClassName="py-4 px-6 rounded-lg bg-red-100 text-red-700" formMethods={formMethods}
listClassName="list-disc ml-4"
listItemClassName=""
/>
<Label
name="name"
className="block text-gray-700 uppercase text-sm"
errorClassName="block uppercase text-sm text-red-700"
> >
Name <FormError
</Label> error={error}
<TextField wrapperClassName="py-4 px-6 rounded-lg bg-red-100 text-red-700"
name="name" listClassName="list-disc ml-4"
validation={{ required: true }} listItemClassName=""
className="border rounded-sm px-2 py-1 outline-none" />
errorClassName="border rounded-sm px-2 py-1 border-red-700 outline-none" <Label
/> name="name"
<FieldError name="name" className="block text-red-700" /> className="block text-gray-700 uppercase text-sm"
errorClassName="block uppercase text-sm text-red-700"
>
Name
</Label>
<TextField
name="name"
validation={{ required: true }}
className="border rounded-sm px-2 py-1 outline-none"
errorClassName="border rounded-sm px-2 py-1 border-red-700 outline-none"
/>
<FieldError name="name" className="block text-red-700" />
<Label <Label
name="name" name="name"
className="block mt-8 text-gray-700 uppercase text-sm" className="block mt-8 text-gray-700 uppercase text-sm"
errorClassName="block mt-8 text-red-700 uppercase text-sm" errorClassName="block mt-8 text-red-700 uppercase text-sm"
> >
Email Email
</Label> </Label>
<TextField <TextField
name="email" name="email"
validation={{ validation={{
required: true, required: true,
}} pattern: {
className="border rounded-sm px-2 py-1" value: /[^@]+@[^.]+\..+/,
errorClassName="border rounded-sm px-2 py-1 border-red-700 outline-none" message: 'Please enter a valid email address',
/> },
<FieldError name="email" className="block text-red-700" /> }}
className="border rounded-sm px-2 py-1"
errorClassName="border rounded-sm px-2 py-1 border-red-700 outline-none"
/>
<FieldError name="email" className="block text-red-700" />
<Label <Label
name="name" name="name"
className="block mt-8 text-gray-700 uppercase text-sm" className="block mt-8 text-gray-700 uppercase text-sm"
errorClassName="block mt-8 text-red-700 uppercase text-sm" errorClassName="block mt-8 text-red-700 uppercase text-sm"
> >
Message Message
</Label> </Label>
<TextAreaField <TextAreaField
name="message" name="message"
validation={{ required: true }} validation={{ required: true }}
className="block border rounded-sm px-2 py-1" className="block border rounded-sm px-2 py-1"
errorClassName="block border rounded-sm px-2 py-1 border-red-700 outline-none" errorClassName="block border rounded-sm px-2 py-1 border-red-700 outline-none"
/> />
<FieldError name="message" className="block text-red-700" /> <FieldError name="message" className="block text-red-700" />
<Submit <Submit
className="block bg-blue-700 text-white mt-8 px-4 py-2 rounded" className="block bg-blue-700 text-white mt-8 px-4 py-2 rounded"
disabled={loading} disabled={loading}
> >
Save Save
</Submit> </Submit>
</Form> </Form>
</>; </>
)
} }
export default ContactPage export default ContactPage