diff --git a/package.json b/package.json index a897a76..9893dbf 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "@types/node": "^16.7.13", "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", + "cpf-cnpj-validator": "^1.0.3", "formik": "^2.2.9", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -18,7 +19,8 @@ "sass": "^1.57.1", "typescript": "^4.4.2", "web-vitals": "^2.1.0", - "yup": "^0.32.11" + "yup": "^0.32.11", + "yup-phone": "^1.3.2" }, "scripts": { "start": "react-scripts start", diff --git a/src/pages/Institutional/index.tsx b/src/pages/Institutional/index.tsx index f73e476..95709e3 100644 --- a/src/pages/Institutional/index.tsx +++ b/src/pages/Institutional/index.tsx @@ -3,9 +3,33 @@ import Home from "../../assets/svg/Home.svg"; import Arrow from "../../assets/svg/Arrow.svg"; import { useState } from "react"; import { Formik, Form, Field } from "formik"; +import * as yup from "yup"; +import "yup-phone"; +import { cpf } from "cpf-cnpj-validator"; export default function Institutional() { const [currTab, setCurrTab] = useState(0); + const [hasSubmited, setSubmited] = useState(false); + const validationSchema = yup.object().shape({ + name: yup + .string() + .min(3, "*Nome muito curto") + .required("*Campo Obrigatório"), + email: yup.string().email("*Email inválido").required("*Campo Obrigatório"), + CPF: yup + .string() + .required("*Campo Obrigatório") + .test("Válida CPF", "*CPF inválido", (CPF = "") => + cpf.isValid(CPF, true) + ), + birthDate: yup.string().required("*Campo Obrigatório"), + phone: yup + .string() + .required("*Campo Obrigatório") + .phone("BR", false, "*Telefone inválido"), + instagram: yup.string(), + check: yup.boolean().oneOf([true]).required(), + }); return ( <>
@@ -114,7 +138,10 @@ export default function Institutional() {

Preencha o formulário

{}} + validationSchema={validationSchema} + onSubmit={() => { + setSubmited(true); + }} initialValues={{ name: "", email: "", @@ -125,16 +152,16 @@ export default function Institutional() { check: false, }} > - {(props) => ( + {({ errors, touched }) => (
-
+
- - *Campo Obrigatório - + {errors.name && touched.name && ( + {errors.name} + )}
-
+
- - *Campo Obrigatório - + {errors.email && touched.email && ( + + {errors.email} + + )}
-
+
- - *Campo Obrigatório - + {errors.CPF && touched.CPF && ( + {errors.CPF} + )}
-
-