feat: yup adicionado ao formulário

adilson-fernando/src/components/Main/ContatoSchema.ts

@@ -0,0 +1,15 @@
+import * as Yup from "yup";
+
+export default Yup.object().shape({
+
+
+
+  nome: Yup.string().required("*Campo Obrigatório").min(3,"Nome inválido"),
+  email: Yup.string().email("Email inválido").required("*Campo Obrigatório"),
+  cpf: Yup.string().required("*Campo Obrigatório"),
+  data: Yup.date().required("*Campo Obrigatório"),
+  telefone: Yup.string().required("*Campo Obrigatório"),
+  insta: Yup.string().min(3, "Instagram inválido"),
+  checkbox: Yup.string().required("*"),
+
+});

adilson-fernando/src/components/Main/contato.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import { Formik, Form, Field, ErrorMessage, FormikHandlers } from "formik";
+import { Formik, Form, Field, ErrorMessage } from "formik";
 
 import styles from "../../styles/Contato.module.scss";
-import { NumberSchema, number, string } from "yup";
+import ContatoShema from "./ContatoSchema";
 
 interface IFormikValues {
   nome: string;
@@ -31,12 +31,23 @@ const Contato = () => {
 
   return (
     <>
-      <Formik onSubmit={handleFormikSubmit} initialValues={initialValues}>
+      <Formik
+        onSubmit={handleFormikSubmit}
+        initialValues={initialValues}
+        validationSchema={ContatoShema}
+      >
         <Form className={styles["div-formulario"]}>
           <h1 className={styles["formulario-titulo"]}>Preencha o formulário</h1>
 
           <div className={styles["formulario-input"]}>
-            <h2 className={styles["input-title"]}>Nome</h2>
+            <div className={styles["input-text"]}>
+              <h2 className={styles["input-title"]}>Nome</h2>
+              <ErrorMessage
+                component="p"
+                name="nome"
+                className={styles["input-invalid"]}
+              />
+            </div>
             <label className={styles["input-label"]} htmlFor="name"></label>
             <Field
               className={styles["input-field"]}
@@ -47,7 +58,14 @@ const Contato = () => {
           </div>
 
           <div className={styles["formulario-input"]}>
-            <h2 className={styles["input-title"]}>E-mail</h2>
+            <div className={styles["input-text"]}>
+              <h2 className={styles["input-title"]}>E-mail</h2>
+              <ErrorMessage
+                component="p"
+                name="email"
+                className={styles["input-invalid"]}
+              />
+            </div>
             <label htmlFor="email"></label>
             <Field
               className={styles["input-field"]}
@@ -58,7 +76,14 @@ const Contato = () => {
           </div>
 
           <div className={styles["formulario-input"]}>
-            <h2 className={styles["input-title"]}>CPF</h2>
+            <div className={styles["input-text"]}>
+              <h2 className={styles["input-title"]}>CPF</h2>
+              <ErrorMessage
+                component="p"
+                name="cpf"
+                className={styles["input-invalid"]}
+              />
+            </div>
             <label className={styles["input-label"]} htmlFor="cpf"></label>
             <Field
               className={styles["input-field"]}
@@ -69,7 +94,14 @@ const Contato = () => {
           </div>
 
           <div className={styles["formulario-input"]}>
-            <h2 className={styles["input-title"]}>Data de Nascimento</h2>
+            <div className={styles["input-text"]}>
+              <h2 className={styles["input-title"]}>Data de Nascimento</h2>
+              <ErrorMessage
+                component="p"
+                name="data"
+                className={styles["input-invalid"]}
+              />
+            </div>
             <label className={styles["input-label"]} htmlFor="data"></label>
             <Field
               className={styles["input-field"]}
@@ -80,7 +112,14 @@ const Contato = () => {
           </div>
 
           <div className={styles["formulario-input"]}>
-            <h2 className={styles["input-title"]}>Telefone</h2>
+            <div className={styles["input-text"]}>
+              <h2 className={styles["input-title"]}>Telefone</h2>
+              <ErrorMessage
+                component="p"
+                name="telefone"
+                className={styles["input-invalid"]}
+              />
+            </div>
             <label className={styles["input-label"]} htmlFor="telefone"></label>
             <Field
               className={styles["input-field"]}
@@ -91,7 +130,9 @@ const Contato = () => {
           </div>
 
           <div className={styles["formulario-input"]}>
-            <h2 className={styles["input-title"]}>Instagram</h2>
+            <div className={styles["input-text"]}>
+              <h2 className={styles["input-title"]}>Instagram</h2>
+            </div>
             <label className={styles["input-label"]} htmlFor="insta"></label>
             <Field
               className={styles["input-field"]}
@@ -102,12 +143,20 @@ const Contato = () => {
           </div>
 
           <div className={styles["formulario-checkbox"]}>
-            <h2 className={styles["checkbox-text"]} >*</h2>
+            <ErrorMessage
+              component="p"
+              name="checkbox"
+              className={styles["input-invalid"]}
+            />
             <a className={styles["checkbox-link"]} href="/contato">
               Declaro que li e aceito
             </a>
-            <Field className={styles["formulario-field"]} type="checkbox" id="checkbox"
-              name="checkbox" />
+            <Field
+              className={styles["formulario-field"]}
+              type="checkbox"
+              id="checkbox"
+              name="checkbox"
+            />
           </div>
 
           <button className={styles["button"]} type="submit">

adilson-fernando/src/styles/Contato.module.scss

@@ -33,20 +33,38 @@
         @media (min-width: 2500px) {
             height: 116px;
         }
-        .input-title{
-            font-family: 'Roboto',sans-serif;
-            font-style: normal;
-            font-weight: 400;
-            font-size: 14px;
-            line-height: 16px;
-            color: #100D0E;
-            margin-bottom: 12px;
-            margin-left: 20px ;
-            @media (min-width: 2500px) {
-                font-size: 28px;
-                line-height: 33px;
+        .input-text{
+            display: flex;
+            justify-content: space-between;
+            .input-title{
+                font-family: 'Roboto',sans-serif;
+                font-style: normal;
+                font-weight: 400;
+                font-size: 14px;
+                line-height: 16px;
+                color: #100D0E;
+                margin-bottom: 12px;
+                margin-left: 20px ;
+                @media (min-width: 2500px) {
+                    font-size: 28px;
+                    line-height: 33px;
+                }
+                
+            }
+            .input-invalid{
+                font-family: 'Roboto';
+                font-style: normal;
+                font-weight: 400;
+                font-size: 12px;
+                line-height: 14px;
+                margin-top: 12px;
+                margin-right: 20px;
+                color: #FF0000;
+                @media (min-width: 2500px) {
+                    font-size: 28px;
+                    line-height: 33px;
+                }
             }
-            
         }
         .input-label{
             width: 100%;
@@ -76,19 +94,6 @@
         align-items: center;
         justify-content: center;
         margin-bottom: 12px;
-        .checkbox-text{
-            font-family: 'Roboto';
-            font-style: normal;
-            font-weight: 400;
-            font-size: 14px;
-            line-height: 16px;
-            color: #FF0000;
-            margin-right: 3px ;
-            @media (min-width: 2500px) {
-                font-size: 28px;
-                line-height: 33px;
-            }
-        }
         .checkbox-link{
             font-family: 'Roboto';
             font-style: normal;
@@ -110,6 +115,10 @@
                 height: 35.15px;
             }
         }
+        .input-invalid{
+            margin-right: 3px;
+            color: #FF0000;
+        }
     }
     .button{
         background: #000000;