src/components/FormInput/FormInput.tsx

@@ -12,27 +12,27 @@ const FormInput = () => {
       nascimento: "",
       tel: "",
       instagram: "",
+      termos: false,
     },
     validationSchema: Yup.object({
-      nome: Yup.string()
-        .required()
-        .test(
+      nome: Yup.string().required("*Campo Obrigatório"),
+      /*.test(
           "is-full-name",
           "Please enter both your first and last name",
           function (value: any) {
             const nameArr = value.split(" ");
             return nameArr.length >= 2;
           }
-        ),
-      email: Yup.string().email().required(),
-      cpf: Yup.string().required(),
-      nascimento: Yup.string().required(),
-      tel: Yup.string().required(),
-      instagram: Yup.string().required(),
+        )*/ email: Yup.string().required("*Campo Obrigatório"),
+      cpf: Yup.string().required("*Campo Obrigatório"),
+      nascimento: Yup.string().required("*Campo Obrigatório"),
+      tel: Yup.string().required("*Campo Obrigatório"),
+      instagram: Yup.string().required("*Campo Obrigatório"),
+      termos: Yup.boolean().required("*").isTrue(),
     }),
     onSubmit: function (values) {
       alert(`You are registered! Name: ${values.nome}. Email: ${values.email}. Profession: ${values.cpf}. 
-              Age: ${values.nascimento}`);
+              Age: ${values.nascimento},${values.tel},${values.instagram}`);
     },
   });
 
@@ -42,7 +42,14 @@ const FormInput = () => {
         <h2>Preencha o formulário</h2>
         <ul className={styles["form-itens"]}>
           <li className={styles["form-item"]}>
-            <label>Nome</label>
+            <div className={styles["textForm"]}>
+              <label>Nome</label>
+              {formik.touched.nome && formik.errors.nome && (
+                <span className={styles["errorFormik"]}>
+                  {formik.errors.nome}
+                </span>
+              )}
+            </div>
             <input
               id="nome"
               type="text"
@@ -52,7 +59,14 @@ const FormInput = () => {
             />
           </li>
           <li className={styles["form-item"]}>
-            <label>E-mail</label>
+            <div className={styles["textForm"]}>
+              <label>E-mail</label>
+              {formik.touched.email && formik.errors.email && (
+                <span className={styles["errorFormik"]}>
+                  {formik.errors.email}
+                </span>
+              )}
+            </div>
             <input
               id="email"
               type="text"
@@ -62,7 +76,14 @@ const FormInput = () => {
             />
           </li>
           <li className={styles["form-item"]}>
-            <label>CPF</label>
+            <div className={styles["textForm"]}>
+              <label>CPF</label>
+              {formik.touched.cpf && formik.errors.cpf && (
+                <span className={styles["errorFormik"]}>
+                  {formik.errors.cpf}
+                </span>
+              )}
+            </div>
             <input
               id="cpf"
               type="text"
@@ -73,7 +94,14 @@ const FormInput = () => {
           </li>
 
           <li className={styles["form-item"]}>
-            <label>Data de Nascimento</label>
+            <div className={styles["textForm"]}>
+              <label>Data de Nascimento</label>
+              {formik.touched.nascimento && formik.errors.nascimento && (
+                <span className={styles["errorFormik"]}>
+                  {formik.errors.nascimento}
+                </span>
+              )}
+            </div>
             <input
               id="nascimento"
               type="text"
@@ -83,7 +111,14 @@ const FormInput = () => {
             />
           </li>
           <li className={styles["form-item"]}>
-            <label>Telefone</label>
+            <div className={styles["textForm"]}>
+              <label>Telefone</label>
+              {formik.touched.tel && formik.errors.tel && (
+                <span className={styles["errorFormik"]}>
+                  {formik.errors.tel}
+                </span>
+              )}
+            </div>
             <input
               id="tel"
               type="text"
@@ -93,7 +128,14 @@ const FormInput = () => {
             />
           </li>
           <li className={styles["form-item"]}>
-            <label>Instagram</label>
+            <div className={styles["textForm"]}>
+              <label>Instagram</label>
+              {formik.touched.instagram && formik.errors.instagram && (
+                <span className={styles["errorFormik"]}>
+                  {formik.errors.instagram}
+                </span>
+              )}
+            </div>
             <input
               id="instagram"
               type="text"
@@ -102,6 +144,15 @@ const FormInput = () => {
               onChange={formik.handleChange}
             />
           </li>
+          <li>
+            {formik.touched.termos && formik.errors.termos && (
+              <span className={styles["errorFormik"]}>
+                {formik.errors.termos}
+              </span>
+            )}
+            <a href="/">Declaro que li e aceito</a>
+            <input type="checkbox" />
+          </li>
         </ul>
         <button type="submit">Cadastre-se</button>
       </form>

src/components/FormInput/formInput.module.scss

@@ -7,3 +7,11 @@
   flex-direction: column;
   margin-bottom: 10px;
 }
+.textForm {
+  display: flex;
+  flex-direction: row;
+}
+.errorFormik {
+  margin-left: 80px;
+  color: red;
+}