Daniel_Moliari_Barbosa/desafio-react-e-typescript-daniel-moliari-barbosa
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: Daniel_Moliari_Barbosa:main
Branches Tags
Daniel_Moliari_Barbosa:main
Daniel_Moliari_Barbosa:development
Daniel_Moliari_Barbosa:feature/contatoSASS
Daniel_Moliari_Barbosa:feature/contato
Daniel_Moliari_Barbosa:feature/institucionalSASS
Daniel_Moliari_Barbosa:feature/institucional
Daniel_Moliari_Barbosa:feature/footerSASS
Daniel_Moliari_Barbosa:feature/footer
Daniel_Moliari_Barbosa:feature/headerSASS
Daniel_Moliari_Barbosa:feature/header
..
compare: Daniel_Moliari_Barbosa:feature/institucionalSASS
Branches Tags
Daniel_Moliari_Barbosa:main
Daniel_Moliari_Barbosa:development
Daniel_Moliari_Barbosa:feature/contatoSASS
Daniel_Moliari_Barbosa:feature/contato
Daniel_Moliari_Barbosa:feature/institucionalSASS
Daniel_Moliari_Barbosa:feature/institucional
Daniel_Moliari_Barbosa:feature/footerSASS
Daniel_Moliari_Barbosa:feature/footer
Daniel_Moliari_Barbosa:feature/headerSASS
Daniel_Moliari_Barbosa:feature/header

No commits in common. "main" and "feature/institucionalSASS" have entirely different histories.
main ... feature/in

1 changed files with 0 additions and 133 deletions
Show Stats Expand all files Collapse all files

133
src/components/ContactForm.tsx
View File

@ -1,133 +0,0 @@
import { Formik, Form, Field, ErrorMessage } from "formik";
import FormSchema from "./schema/FormSchema";
import { useState } from "react";
interface IFormikValues {
name: string;
email: string;
cpf: string;
data: string;
telefone: string;
instagram?: string;
checkbox: boolean;
}
const initialValues = {
name: "",
email: "",
cpf: "",
data: "",
telefone: "",
instagram: "",
checkbox: false,
};
export const ContactForm = () => {
const [isSubmited, setIsSubmited] = useState(false);
const formSubmit = (values: IFormikValues) => {
setIsSubmited(true);
};
return (
<Formik
onSubmit={formSubmit}
initialValues={initialValues}
validationSchema={FormSchema}
validateOnMount
>
{({ errors, touched, isValid, validateForm }) => (
<Form>
<div className="form-entryes">
<label htmlFor="name">Nome</label>
<span className="error">
<ErrorMessage name="name" className="form-ivalid-feedback" />
</span>
<Field
id="name"
name="name"
placeholder="Seu nome completo"
className={errors.name && touched.name && "invalid"}
/>
</div>
<div className="form-entryes">
<label htmlFor="email">E-mail</label>
<span className="error">
<ErrorMessage name="email" className="form-ivalid-feedback" />
</span>
<Field
id="email"
name="email"
placeholder="Seu e-mail"
className={errors.email && touched.email && "invalid"}
/>
</div>
<div className="form-entryes">
<label htmlFor="cpf">CPF</label>
<span className="error">
<ErrorMessage name="cpf" className="form-ivalid-feedback" />
</span>
<Field
id="cpf"
name="cpf"
type="number"
placeholder="000.000.000-00"
className={errors.cpf && touched.cpf && "invalid"}
/>
</div>
<div className="form-entryes">
<label htmlFor="data">Data de Nascimento:</label>
<span className="error">
<ErrorMessage name="data" className="form-ivalid-feedback" />
</span>
<Field
id="data"
name="data"
type="number"
placeholder="00.00.0000"
className={errors.data && touched.data && "invalid"}
/>
</div>
<div className="form-entryes">
<label htmlFor="telefone">Telefone:</label>
<span className="error">
<ErrorMessage name="telefone" className="form-ivalid-feedback" />
</span>
<Field
id="telefone"
name="telefone"
type="tel"
placeholder="(00) 00000-0000"
className={errors.telefone && touched.telefone && "invalid"}
/>
</div>
<div className="form-entryes">
<label htmlFor="instagram">Instagram</label>
<span>
<ErrorMessage name="instagram" className="form-ivalid-feedback" />
</span>
<Field id="instagram" name="instagram" placeholder="@seuuser" />
</div>
<div className="checkbox_wrapper">
<label htmlFor="checkbox">Declaro que li e aceito</label>
<span className="error">
<ErrorMessage name="checkbox" className="form-ivalid-feedback" />
</span>
<Field
type="checkbox"
id="checkbox"
name="checkbox"
className={errors.checkbox && touched.checkbox && "invalid"}
/>
</div>
<button>CADASTRE-SE</button>
{isSubmited && <span>*Formulário enviado com sucesso!</span>}
</Form>
)}
</Formik>
);
};