matheus_mariosa/desafio-react-e-typescript-matheus-mariosa
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: construção da validação inicial

Browse Source
This commit is contained in:
Matheus Mariosa 2023-01-20 20:23:01 -03:00
parent 18400d0e65
commit 39d72a3b8a
3 changed files with 73 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Main/formschema.ts Normal file
View File

@ -0,0 +1,10 @@
import { type } from "os";
import * as Yup from "yup"
export default Yup.object().shape({
nome: Yup.string().required("*Campo Obrigatório").min(2),
email: Yup.string().required("*Campo Obrigatório").email("E-mail inválido"),
cpf: Yup.number().required("*Campo Obrigatório").min(14),
dataDeNacismento: Yup.date().required("*Campo Obrigatório"),
telefone: Yup.number().required("*Campo Obrigatório").min(9),
})

35
src/components/Main/main.module.scss
View File

@ -122,21 +122,36 @@
.item-form-conteiner{
display: flex;
flex-direction: column;
.item-form-conteiner-schema {
height: 40px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.form-label, .form-input{
.form-label, .invalid-feedback{
font-family: 'Roboto';
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: #100D0E;
margin-left: 15px;
}
.invalid-feedback{
color: red;
margin-left: 0;
margin-top: 24px;
}
}
.form-input{
font-family: 'Roboto';
font-weight: 400;
font-size: 14px;
line-height: 16px;
}
.form-label{
color: #100D0E;
margin: 12px 0;
margin-left: 15px;
}
.form-input{
border: 1px solid #100D0E;
border-radius: 25px;
padding: 15px 20px;

57
src/components/Main/mainFormik.tsx
View File

@ -2,6 +2,8 @@ import React from 'react';
import styles from './main.module.scss';
import formschema from './formschema';
import {Formik, Form, Field, ErrorMessage, FormikHelpers} from 'formik';
interface IformikValues {
@ -31,42 +33,59 @@ const Contato = () => {
return(
<div className={styles['conteiner-form']}>
<h2 className={styles['item-form-title']}>Preencha o formulário </h2>
<Formik onSubmit={fomikSubmit} initialValues={initialValue}>
<Formik onSubmit={fomikSubmit} initialValues={initialValue} validationSchema={formschema}>
<Form className={styles['form']}>
<div className={styles['item-form-conteiner']}>
<label htmlFor="nome" className={styles['form-label']}>
Nome
</label>
<div className={styles['item-form-conteiner-schema']}>
<label htmlFor="nome" className={styles['form-label']}>
Nome
</label>
<ErrorMessage component="span" name="nome" className={styles["invalid-feedback"]}/>
</div>
<Field className={styles['form-input']} id="nome" name="nome" placeholder="Seu nome completo" />
</div>
<div className={styles['item-form-conteiner']}>
<label htmlFor="email" className={styles['form-label']}>
E-mail
</label>
<div className={styles['item-form-conteiner-schema']}>
<label htmlFor="email" className={styles['form-label']}>
E-mail
</label>
<ErrorMessage component="span" name="email" className={styles["invalid-feedback"]}/>
</div>
<Field className={styles['form-input']} id="email" name="email" placeholder="Seu e-mail" />
</div>
<div className={styles['item-form-conteiner']}>
<label htmlFor="cpf" className={styles['form-label']}>
CPF
</label>
<div className={styles['item-form-conteiner-schema']}>
<label htmlFor="cpf" className={styles['form-label']}>
CPF
</label>
<ErrorMessage component="span" name="cpf" className={styles["invalid-feedback"]}/>
</div>
<Field className={styles['form-input']} id="cpf" name="cpf" placeholder="000.000.000-00" />
</div>
<div className={styles['item-form-conteiner']}>
<label htmlFor="dataDeNacismento" className={styles['form-label']}>
Data de Nascimento
</label>
<div className={styles['item-form-conteiner-schema']}>
<label htmlFor="dataDeNacismento" className={styles['form-label']}>
Data de Nascimento
</label>
<ErrorMessage component="span" name="dataDeNacismento" className={styles["invalid-feedback"]}/>
</div>
<Field className={styles['form-input']} id="dataDeNacismento" name="dataDeNacismento" placeholder="00.00.0000" />
</div>
<div className={styles['item-form-conteiner']}>
<label htmlFor="telefone" className={styles['form-label']}>
Telefone
</label>
<div className={styles['item-form-conteiner-schema']}>
<label htmlFor="telefone" className={styles['form-label']}>
Telefone
</label>
<ErrorMessage component="span" name="telefone" className={styles["invalid-feedback"]}/>
</div>
<Field className={styles['form-input']} id="telefone" name="telefone" placeholder="(00) 00000-0000" />
</div>
<div className={styles['item-form-conteiner']}>
<label htmlFor="instagram" className={styles['form-label']}>
Instagram
</label>
<div className={styles['item-form-conteiner-schema']}>
<label htmlFor="instagram" className={styles['form-label']}>
Instagram
</label>
</div>
<Field className={styles['form-input']} id="instagram" name="instagram" placeholder="@seuuser" />
</div>
<div className={styles['form-conteiner-checkbox']}>