forked from M3-Academy/desafio-react-e-typescript
feat: cria a validação para o formulário através do yup
This commit is contained in:
parent
e9ca5befb9
commit
bfd9d31bd2
93
pagina-institucional/package-lock.json
generated
93
pagina-institucional/package-lock.json
generated
@ -23,7 +23,9 @@
|
||||
"sass": "^1.57.1",
|
||||
"scss": "^0.2.4",
|
||||
"typescript": "^4.9.4",
|
||||
"web-vitals": "^2.1.4"
|
||||
"web-vitals": "^2.1.4",
|
||||
"yarn": "^1.22.19",
|
||||
"yup": "^0.32.11"
|
||||
}
|
||||
},
|
||||
"node_modules/@adobe/css-tools": {
|
||||
@ -3814,6 +3816,11 @@
|
||||
"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
|
||||
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
|
||||
},
|
||||
"node_modules/@types/lodash": {
|
||||
"version": "4.14.191",
|
||||
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz",
|
||||
"integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ=="
|
||||
},
|
||||
"node_modules/@types/mime": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
|
||||
@ -11853,6 +11860,11 @@
|
||||
"multicast-dns": "cli.js"
|
||||
}
|
||||
},
|
||||
"node_modules/nanoclone": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz",
|
||||
"integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA=="
|
||||
},
|
||||
"node_modules/nanoid": {
|
||||
"version": "3.3.4",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
|
||||
@ -13763,6 +13775,11 @@
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
},
|
||||
"node_modules/property-expr": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.5.tgz",
|
||||
"integrity": "sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA=="
|
||||
},
|
||||
"node_modules/proxy-addr": {
|
||||
"version": "2.0.7",
|
||||
"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
|
||||
@ -15698,6 +15715,11 @@
|
||||
"node": ">=0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/toposort": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
|
||||
"integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg=="
|
||||
},
|
||||
"node_modules/tough-cookie": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.2.tgz",
|
||||
@ -17001,6 +17023,19 @@
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/yarn": {
|
||||
"version": "1.22.19",
|
||||
"resolved": "https://registry.npmjs.org/yarn/-/yarn-1.22.19.tgz",
|
||||
"integrity": "sha512-/0V5q0WbslqnwP91tirOvldvYISzaqhClxzyUKXYxs07yUILIs5jx/k6CFe8bvKSkds5w+eiOqta39Wk3WxdcQ==",
|
||||
"hasInstallScript": true,
|
||||
"bin": {
|
||||
"yarn": "bin/yarn.js",
|
||||
"yarnpkg": "bin/yarn.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/yocto-queue": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
|
||||
@ -17011,6 +17046,23 @@
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/yup": {
|
||||
"version": "0.32.11",
|
||||
"resolved": "https://registry.npmjs.org/yup/-/yup-0.32.11.tgz",
|
||||
"integrity": "sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.15.4",
|
||||
"@types/lodash": "^4.14.175",
|
||||
"lodash": "^4.17.21",
|
||||
"lodash-es": "^4.17.21",
|
||||
"nanoclone": "^0.2.1",
|
||||
"property-expr": "^2.0.4",
|
||||
"toposort": "^2.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
@ -19603,6 +19655,11 @@
|
||||
"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
|
||||
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
|
||||
},
|
||||
"@types/lodash": {
|
||||
"version": "4.14.191",
|
||||
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz",
|
||||
"integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ=="
|
||||
},
|
||||
"@types/mime": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
|
||||
@ -25478,6 +25535,11 @@
|
||||
"thunky": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"nanoclone": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz",
|
||||
"integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA=="
|
||||
},
|
||||
"nanoid": {
|
||||
"version": "3.3.4",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
|
||||
@ -26667,6 +26729,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"property-expr": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.5.tgz",
|
||||
"integrity": "sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA=="
|
||||
},
|
||||
"proxy-addr": {
|
||||
"version": "2.0.7",
|
||||
"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
|
||||
@ -28083,6 +28150,11 @@
|
||||
"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
|
||||
"integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA=="
|
||||
},
|
||||
"toposort": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
|
||||
"integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg=="
|
||||
},
|
||||
"tough-cookie": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.2.tgz",
|
||||
@ -29082,10 +29154,29 @@
|
||||
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
|
||||
"integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w=="
|
||||
},
|
||||
"yarn": {
|
||||
"version": "1.22.19",
|
||||
"resolved": "https://registry.npmjs.org/yarn/-/yarn-1.22.19.tgz",
|
||||
"integrity": "sha512-/0V5q0WbslqnwP91tirOvldvYISzaqhClxzyUKXYxs07yUILIs5jx/k6CFe8bvKSkds5w+eiOqta39Wk3WxdcQ=="
|
||||
},
|
||||
"yocto-queue": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
|
||||
"integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
|
||||
},
|
||||
"yup": {
|
||||
"version": "0.32.11",
|
||||
"resolved": "https://registry.npmjs.org/yup/-/yup-0.32.11.tgz",
|
||||
"integrity": "sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.15.4",
|
||||
"@types/lodash": "^4.14.175",
|
||||
"lodash": "^4.17.21",
|
||||
"lodash-es": "^4.17.21",
|
||||
"nanoclone": "^0.2.1",
|
||||
"property-expr": "^2.0.4",
|
||||
"toposort": "^2.0.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,7 +18,9 @@
|
||||
"sass": "^1.57.1",
|
||||
"scss": "^0.2.4",
|
||||
"typescript": "^4.9.4",
|
||||
"web-vitals": "^2.1.4"
|
||||
"web-vitals": "^2.1.4",
|
||||
"yarn": "^1.22.19",
|
||||
"yup": "^0.32.11"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
||||
@ -1,56 +1,100 @@
|
||||
import React from "react";
|
||||
import { Formik, Form, Field, ErrorMessage, FormikHelpers } from "formik";
|
||||
import styles from "../style/Main.module.scss";
|
||||
import FormSchema from "./schema/FormSchema";
|
||||
import styles from "../style/FormCustom.module.scss";
|
||||
|
||||
interface IFormikValues {
|
||||
name: string;
|
||||
email: string;
|
||||
cpf: string;
|
||||
telefone: string;
|
||||
insta: string;
|
||||
termo: string;
|
||||
}
|
||||
|
||||
const initialValues = {
|
||||
name: "",
|
||||
email: "",
|
||||
cpf: "",
|
||||
telefone: "",
|
||||
insta: "",
|
||||
termo: "",
|
||||
};
|
||||
|
||||
const FormCustom = () => {
|
||||
const handleFormikSubmit = (values: IFormikValues) => {};
|
||||
const handleFormikSubmit = (
|
||||
values: IFormikValues,
|
||||
actions: FormikHelpers<IFormikValues>
|
||||
) => {
|
||||
actions.resetForm();
|
||||
actions.setStatus({ success: "Email sent !" });
|
||||
};
|
||||
return (
|
||||
<div className={styles.Form_Wrapper}>
|
||||
<Formik onSubmit={handleFormikSubmit} initialValues={initialValues}>
|
||||
<Formik
|
||||
onSubmit={handleFormikSubmit}
|
||||
initialValues={initialValues}
|
||||
validationSchema={FormSchema}
|
||||
>
|
||||
<Form>
|
||||
<div>
|
||||
<div className={styles.formCal}>
|
||||
<label htmlFor="name">Nome</label>
|
||||
<Field id="name" name="name" placeholder="Seu nome completo" />
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="name"
|
||||
className={styles.FormInvalid}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className={styles.formCal}>
|
||||
<label htmlFor="email">Email</label>
|
||||
<Field id="email" name="email" placeholder="Seu email" />
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="email"
|
||||
className={styles.FormInvalid}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className={styles.formCal}>
|
||||
<label htmlFor="cpf">CPF</label>
|
||||
<Field id="cpf" name="cpf" placeholder="000.000.000-00" />
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="cpf"
|
||||
className={styles.FormInvalid}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className={styles.formCal}>
|
||||
<label htmlFor="telefone">Telefone</label>
|
||||
<Field
|
||||
id="telefone"
|
||||
name="telefone"
|
||||
placeholder="(00) 00000-0000"
|
||||
/>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="telefone"
|
||||
className={styles.FormInvalid}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className={styles.formCal}>
|
||||
<label htmlFor="insta">Instagram</label>
|
||||
<Field id="insta" name="insta" placeholder="@seuuser" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>
|
||||
<div className={styles.formCalTermo}>
|
||||
<label htmlFor="termo">
|
||||
<span>*</span>Declaro que li e aceito
|
||||
<input type="checkbox" />
|
||||
<Field id="termo" name="termo" type="checkbox" />
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="termo"
|
||||
className={styles.FormInvalid}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
11
pagina-institucional/src/components/schema/FormSchema.ts
Normal file
11
pagina-institucional/src/components/schema/FormSchema.ts
Normal file
@ -0,0 +1,11 @@
|
||||
import * as Yup from "yup";
|
||||
|
||||
export default Yup.object().shape({
|
||||
name: Yup.string()
|
||||
.required("*Campo Obrigatório")
|
||||
.min(3, "*Nome Inválido"),
|
||||
email: Yup.string().required("*Campo Obrigatório").email("Email Inválido"),
|
||||
cpf: Yup.string().required("*Campo Obrigatório"),
|
||||
telefone: Yup.string().required("*Campo Obrigatório"),
|
||||
termo: Yup.string().required(""),
|
||||
});
|
||||
@ -8,7 +8,6 @@
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
max-height: 50px;
|
||||
}
|
||||
|
||||
.accordionTitle {
|
||||
|
||||
61
pagina-institucional/src/style/FormCustom.module.scss
Normal file
61
pagina-institucional/src/style/FormCustom.module.scss
Normal file
@ -0,0 +1,61 @@
|
||||
.Form_Wrapper {
|
||||
width: 95%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
span {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.formCalTermo {
|
||||
text-align: center;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
|
||||
.formCal {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
label {
|
||||
margin-bottom: 12px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
input {
|
||||
background: #ffffff;
|
||||
border: 1px solid #100d0e;
|
||||
border-radius: 25px;
|
||||
height: 46px;
|
||||
padding: 0 20px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
width: 748px;
|
||||
height: 52.44px;
|
||||
background: #000000;
|
||||
border-radius: 25px;
|
||||
margin-bottom: 25px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.Form_Wrapper form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.FormInvalid {
|
||||
position: absolute;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
text-align: right;
|
||||
color: #ff0000;
|
||||
margin: 0;
|
||||
top: 15px;
|
||||
right: 0;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user