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

Feat: Adiciona reset do form

Browse Source
This commit is contained in:
SamuelCondack 2023-01-09 16:39:09 -03:00
parent b01f4538af
commit ec8c15ef50
3 changed files with 70 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
my-app/src/pages/Contact.modules.scss
View File

@ -22,4 +22,23 @@ select.input-error{
font-size: 12px;
line-height: 14px;
color: #FF0000;
}
.errorDiv{
display: flex;
position: relative;
justify-content: right;
float: right;
top: 30px;
}
.errorP{
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: #FF0000;
}
button:disabled {
opacity: 0.35;
}

58
my-app/src/pages/contact.tsx
View File

@ -2,12 +2,13 @@ import { useFormik } from 'formik';
import './Contact.modules.scss'
import { Schema } from '../schemas/Schema'
const onSubmit = () => {
console.log("submitted")
}
const onSubmit = async (actions:any) => {
await new Promise((resolve) => setTimeout(resolve, 1000));
actions.resetForm()
};
const Contact = () => {
const {values, errors, touched, handleBlur, handleChange, handleSubmit} = useFormik({
const {values, errors, touched, isSubmitting, handleBlur, handleChange, handleSubmit} = useFormik({
initialValues: {
nome: '',
email: '',
@ -19,14 +20,17 @@ const Contact = () => {
validationSchema: Schema ,
onSubmit
})
console.log(values)
console.log(errors);
return (
<>
<h1>Preencha o formulário</h1>
<div className='formWrapper'>
<form onSubmit={handleSubmit} className='form' autoComplete='off'>
{errors.nome && touched.nome &&
<div className='errorDiv'>
<p className='errorP'>{errors.nome}</p>
</div>}
<label htmlFor="nome">Nome</label>
<input value={values.nome}
onChange={handleChange}
@ -35,7 +39,11 @@ const Contact = () => {
placeholder='Seu nome completo'
onBlur={handleBlur}
className={errors.nome && touched.nome ? "input-error" : ""}/>
{errors.email && touched.email &&
<div className='errorDiv'>
<p className='errorP'>{errors.email}</p>
</div>}
<label htmlFor="email">E-mail</label>
<input value={values.email}
onChange={handleChange}
@ -44,46 +52,68 @@ const Contact = () => {
placeholder='Seu e-mail'
onBlur={handleBlur}
className={errors.email && touched.email ? "input-error" : ""}/>
{errors.cpf && touched.cpf &&
<div className='errorDiv'>
<p className='errorP'>{errors.cpf}</p>
</div>}
<label htmlFor="cpf">CPF</label>
<input value={values.cpf}
onChange={handleChange}
id='cpf'
type="number"
placeholder='000.000.000-00'
onBlur={handleBlur}/>
onBlur={handleBlur}
className={errors.cpf && touched.cpf ? "input-error" : ""}/>
{errors.nascimento && touched.nascimento &&
<div className='errorDiv'>
<p className='errorP'>{errors.nascimento}</p>
</div>}
<label htmlFor="nascimento">Data de Nascimento</label>
<input value={values.nascimento}
onChange={handleChange}
id='nascimento'
type="number"
placeholder='00.00.0000'
onBlur={handleBlur}/>
onBlur={handleBlur}
className={errors.nascimento && touched.nascimento ? "input-error" : ""}/>
{errors.telefone && touched.telefone &&
<div className='errorDiv'>
<p className='errorP'>{errors.telefone}</p>
</div>}
<label htmlFor="telefone">telefone</label>
<input value={values.telefone}
onChange={handleChange}
id='telefone'
type="tel"
placeholder='(00) 00000-0000'
onBlur={handleBlur}/>
onBlur={handleBlur}
className={errors.telefone && touched.telefone ? "input-error" : ""}/>
{errors.instagram && touched.instagram &&
<div className='errorDiv'>
<p className='errorP'>{errors.instagram}</p>
</div>}
<label htmlFor="instagram">Instagram</label>
<input value={values.instagram}
onChange={handleChange}
id='instagram'
type="text"
placeholder='@seuuser'
onBlur={handleBlur}/>
onBlur={handleBlur}
className={errors.instagram && touched.instagram ? "input-error" : ""}/>
<div className='checkbox'>
<label htmlFor="check">
<a href="">Declaro que li e aceito</a>
</label>
<input id='check' type="checkbox" />
<input id='check' type="checkbox" required/>
</div>
<div className='signupButton'>
<button type='submit'>CADASTRE-SE</button>
<button disabled={isSubmitting} type='submit'>CADASTRE-SE</button>
</div>
</form>
</div>

12
my-app/src/schemas/Schema.tsx
View File

@ -1,11 +1,13 @@
import * as yup from 'yup';
const cpfRegex = /^\d{3}\.\d{3}\.\d{3}\-\d{2}$/
const Schema = yup.object().shape({
nome: yup.string().matches(/^[aA-zZ\s]+$/).required("*Campo Obrigatório"),
email: yup.string().email().required("*Campo Obrigatório"),
cpf: yup.number().min(11).max(11).required("*Campo Obrigatório"),
nascimento: yup.number().min(8).max(8).required("*Campo Obrigatório"),
telefone: yup.number().min(11).max(11).required("*Campo Obrigatório"),
nome: yup.string().matches(/^[aA-zZ\s]+$/, {message: "*Nome Inválido"}).required("*Campo Obrigatório"),
email: yup.string().email("*Email inválido").required("*Campo Obrigatório"),
cpf: yup.string().length(11, "*CPF Inválido").required("*Campo Obrigatório"),
nascimento: yup.string().length(8, "*Data Inválida").required("*Campo Obrigatório"),
telefone: yup.string().length(11, "*Telefone Inválido").required("*Campo Obrigatório"),
instagram: yup.string().required("*Campo Obrigatório")
});