forked from M3-Academy/desafio-react-e-typescript
refactor(home): adicionando funciton se o input foi selecionado ou nao nno formik
This commit is contained in:
parent
85b92a43c4
commit
4b2ea638bd
@ -44,171 +44,193 @@ const FaleConosco = () => {
|
||||
initialValues={initialValues}
|
||||
validationSchema={FormSchema}
|
||||
>
|
||||
<Form className={styles["form__wrapper"]}>
|
||||
<h2 className={styles["form__title"]}>Preencha o formulário </h2>
|
||||
<div className={styles["form__col"]}>
|
||||
<label className={styles["form__col__type"]} htmlFor="name">
|
||||
Nome
|
||||
</label>
|
||||
<Field id="name" name="name" placeholder="Seu nome completo" />
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="name"
|
||||
className={styles["form__col__error"]}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles["form__col"]}>
|
||||
<label className={styles["form__col__type"]} htmlFor="email">
|
||||
Email
|
||||
</label>
|
||||
<Field id="email" name="email" placeholder="Seu email" />
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="email"
|
||||
className={styles["form__col__error"]}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles["form__col"]}>
|
||||
<label className={styles["form__col__type"]} htmlFor="cpf">
|
||||
CPF
|
||||
</label>
|
||||
<Field
|
||||
name="cpf"
|
||||
render={({ field }: any) => (
|
||||
<MaskedInput
|
||||
id="cpf"
|
||||
type="tel"
|
||||
mask={[
|
||||
/[0-9]/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
".",
|
||||
/[0-9]/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
".",
|
||||
/[0-9]/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
"-",
|
||||
/[0-9]/,
|
||||
/\d/,
|
||||
]}
|
||||
{...field}
|
||||
placeholder="000.000.000-00"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="cpf"
|
||||
className={styles["form__col__error"]}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles["form__col"]}>
|
||||
<label className={styles["form__col__type"]} htmlFor="birthDate">
|
||||
Data de Nascimento:
|
||||
</label>
|
||||
<Field
|
||||
type="tel"
|
||||
name="birthDate"
|
||||
render={({ field }: any) => (
|
||||
<MaskedInput
|
||||
id="birthDate"
|
||||
type="tel"
|
||||
mask={[
|
||||
/[0-3]/,
|
||||
/[0-9]/,
|
||||
".",
|
||||
/[0-1]/,
|
||||
/[0-9]/,
|
||||
".",
|
||||
/[0-9]/,
|
||||
/[0-9]/,
|
||||
/[0-9]/,
|
||||
/[0-9]/,
|
||||
]}
|
||||
{...field}
|
||||
placeholder="00.00.0000"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="birthDate"
|
||||
className={styles["form__col__error"]}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles["form__col"]}>
|
||||
<label className={styles["form__col__type"]} htmlFor="celPhone">
|
||||
Telefone:
|
||||
</label>
|
||||
<Field
|
||||
type="tel"
|
||||
name="celPhone"
|
||||
render={({ field }: any) => (
|
||||
<MaskedInput
|
||||
id="celPhone"
|
||||
type="tel"
|
||||
mask={[
|
||||
"(",
|
||||
/[0-9]/,
|
||||
/\d/,
|
||||
")",
|
||||
" ",
|
||||
/[0-9]/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
"-",
|
||||
/[0-9]/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
]}
|
||||
{...field}
|
||||
placeholder="(00) 00000-0000"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="celPhone"
|
||||
className={styles["form__col__error"]}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles["form__col"]}>
|
||||
<label className={styles["form__col__type"]} htmlFor="instagram">
|
||||
Instagram:
|
||||
</label>
|
||||
<Field id="instagram" name="instagram" placeholder="@seuuser" />
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="instagram"
|
||||
className={styles["form__col__error"]}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles["form__col-checkbox"]}>
|
||||
<Link
|
||||
className={styles["form__col-checkbox__type"]}
|
||||
to="/segurancaprivacidade"
|
||||
target="_blank"
|
||||
>
|
||||
{({ errors, touched }) => (
|
||||
<Form className={styles["form__wrapper"]}>
|
||||
<h2 className={styles["form__title"]}>Preencha o formulário </h2>
|
||||
<div className={styles["form__col"]}>
|
||||
<label className={styles["form__col__type"]} htmlFor="name">
|
||||
Nome
|
||||
</label>
|
||||
<Field
|
||||
id="name"
|
||||
name="name"
|
||||
placeholder="Seu nome completo"
|
||||
className={errors.name && touched.name && "invalid"}
|
||||
/>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="acceptTerms"
|
||||
className={styles["form__col-checkbox__error"]}
|
||||
/>{" "}
|
||||
Declaro que li e aceito
|
||||
</Link>
|
||||
<Field name="acceptTerms" type="checkbox" />
|
||||
</div>
|
||||
name="name"
|
||||
className={styles["form__col__error"]}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles["form__col"]}>
|
||||
<label className={styles["form__col__type"]} htmlFor="email">
|
||||
Email
|
||||
</label>
|
||||
<Field
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="Seu email"
|
||||
className={errors.email && touched.email && "invalid"}
|
||||
/>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="email"
|
||||
className={styles["form__col__error"]}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles["form__col"]}>
|
||||
<label className={styles["form__col__type"]} htmlFor="cpf">
|
||||
CPF
|
||||
</label>
|
||||
<Field
|
||||
name="cpf"
|
||||
render={({ field }: any) => (
|
||||
<MaskedInput
|
||||
id="cpf"
|
||||
type="tel"
|
||||
mask={[
|
||||
/[0-9]/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
".",
|
||||
/[0-9]/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
".",
|
||||
/[0-9]/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
"-",
|
||||
/[0-9]/,
|
||||
/\d/,
|
||||
]}
|
||||
{...field}
|
||||
placeholder="000.000.000-00"
|
||||
className={errors.cpf && touched.cpf && "invalid"}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="cpf"
|
||||
className={styles["form__col__error"]}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles["form__col"]}>
|
||||
<label className={styles["form__col__type"]} htmlFor="birthDate">
|
||||
Data de Nascimento:
|
||||
</label>
|
||||
<Field
|
||||
type="tel"
|
||||
name="birthDate"
|
||||
render={({ field }: any) => (
|
||||
<MaskedInput
|
||||
id="birthDate"
|
||||
type="tel"
|
||||
mask={[
|
||||
/[0-3]/,
|
||||
/[0-9]/,
|
||||
".",
|
||||
/[0-1]/,
|
||||
/[0-9]/,
|
||||
".",
|
||||
/[0-9]/,
|
||||
/[0-9]/,
|
||||
/[0-9]/,
|
||||
/[0-9]/,
|
||||
]}
|
||||
{...field}
|
||||
placeholder="00.00.0000"
|
||||
className={
|
||||
errors.birthDate && touched.birthDate && "invalid"
|
||||
}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="birthDate"
|
||||
className={styles["form__col__error"]}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles["form__col"]}>
|
||||
<label className={styles["form__col__type"]} htmlFor="celPhone">
|
||||
Telefone:
|
||||
</label>
|
||||
<Field
|
||||
type="tel"
|
||||
name="celPhone"
|
||||
render={({ field }: any) => (
|
||||
<MaskedInput
|
||||
id="celPhone"
|
||||
type="tel"
|
||||
mask={[
|
||||
"(",
|
||||
/[0-9]/,
|
||||
/\d/,
|
||||
")",
|
||||
" ",
|
||||
/[0-9]/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
"-",
|
||||
/[0-9]/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
]}
|
||||
{...field}
|
||||
placeholder="(00) 00000-0000"
|
||||
className={errors.celPhone && touched.celPhone && "invalid"}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="celPhone"
|
||||
className={styles["form__col__error"]}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles["form__col"]}>
|
||||
<label className={styles["form__col__type"]} htmlFor="instagram">
|
||||
Instagram:
|
||||
</label>
|
||||
<Field
|
||||
id="instagram"
|
||||
name="instagram"
|
||||
placeholder="@seuuser"
|
||||
className={errors.instagram && touched.instagram && "invalid"}
|
||||
/>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="instagram"
|
||||
className={styles["form__col__error"]}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles["form__col-checkbox"]}>
|
||||
<Link
|
||||
className={styles["form__col-checkbox__type"]}
|
||||
to="/segurancaprivacidade"
|
||||
target="_blank"
|
||||
>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="acceptTerms"
|
||||
className={styles["form__col-checkbox__error"]}
|
||||
/>{" "}
|
||||
Declaro que li e aceito
|
||||
</Link>
|
||||
<Field name="acceptTerms" type="checkbox" />
|
||||
</div>
|
||||
|
||||
<button className={styles["form__button"]} type="submit">
|
||||
CADASTRE-SE
|
||||
</button>
|
||||
</Form>
|
||||
<button className={styles["form__button"]} type="submit">
|
||||
CADASTRE-SE
|
||||
</button>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</div>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user