forked from M3-Academy/desafio-react-e-typescript
fix: correção validação newsletter
This commit is contained in:
parent
9a76e21acb
commit
0aa8b6571a
@ -47,6 +47,7 @@
|
||||
align-items: flex-end;
|
||||
height: 42px;
|
||||
margin-top: 8px;
|
||||
position: relative;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: block;
|
||||
@ -56,6 +57,23 @@
|
||||
@media (min-width: 2500px) {
|
||||
height: 59px;
|
||||
}
|
||||
|
||||
.validation-text {
|
||||
font-family: var(--font-roboto);
|
||||
color: var(--red-100);
|
||||
position: absolute;
|
||||
top: 41px;
|
||||
font-size: 12px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
top: 50px;
|
||||
}
|
||||
@media (min-width: 2500px) {
|
||||
top: 58px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
width: 340px;
|
||||
height: 42px;
|
||||
|
@ -1,21 +1,50 @@
|
||||
import React from "react"
|
||||
import { Formik, Form, Field, ErrorMessage } from "formik";
|
||||
import FormSchema from "../../../schema/FormSchemaNewsletter"
|
||||
import styleNewsletter from "./Newsletter.module.scss"
|
||||
|
||||
|
||||
export interface formValues {
|
||||
email: string;
|
||||
}
|
||||
|
||||
const initialValues: formValues = {
|
||||
email: "",
|
||||
}
|
||||
const Newsletter = () => {
|
||||
|
||||
const handleOnSubmit = (values: formValues, { resetForm }: any) => {
|
||||
resetForm({ values: '' });
|
||||
}
|
||||
return (
|
||||
<section className={styleNewsletter["container"]}>
|
||||
<div className={styleNewsletter["container__wrapper"]}>
|
||||
<p>ASSINE NOSSA NEWSLETTER</p>
|
||||
<form>
|
||||
<div className={styleNewsletter["container__wrapper__input-button"]}>
|
||||
<input type="email" placeholder="E-mail" />
|
||||
<button type="submit" aria-label="Enviar e-mail">
|
||||
ENVIAR
|
||||
</button>
|
||||
<Formik
|
||||
onSubmit={handleOnSubmit}
|
||||
initialValues={initialValues}
|
||||
validationSchema={FormSchema}
|
||||
>
|
||||
{({ errors, touched }) => (
|
||||
|
||||
<section className={styleNewsletter["container"]}>
|
||||
<div className={styleNewsletter["container__wrapper"]}>
|
||||
<p>ASSINE NOSSA NEWSLETTER</p>
|
||||
|
||||
<Form>
|
||||
<div className={styleNewsletter["container__wrapper__input-button"]}>
|
||||
<ErrorMessage component="span" className={styleNewsletter["validation-text"]} name="email" />
|
||||
<Field type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="E-mail"
|
||||
className={errors.email && touched.email ? "validation-text" : null} />
|
||||
<button type="submit" aria-label="Enviar e-mail">
|
||||
ENVIAR
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
)}
|
||||
</Formik>
|
||||
)
|
||||
}
|
||||
|
||||
|
@ -63,12 +63,12 @@ const ContatoForm = () => {
|
||||
|
||||
<div className={StyleForm["form-field"]}>
|
||||
<label htmlFor="email">E-mail</label>
|
||||
<ErrorMessage component="span" className={StyleForm["validation-text"]} name="email" />
|
||||
<Field type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="Seu e-mail"
|
||||
className={errors.email && touched.email ? "validation-text" : null} />
|
||||
<ErrorMessage component="span" className={StyleForm["validation-text"]} name="email" />
|
||||
</div>
|
||||
|
||||
<div className={StyleForm["form-field"]}>
|
||||
|
7
src/schema/FormSchemaNewsletter.ts
Normal file
7
src/schema/FormSchemaNewsletter.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import * as Yup from "yup"
|
||||
|
||||
|
||||
export default Yup.object().shape({
|
||||
email: Yup.string().email("E-mail Inválido").required("E-mail Inválido"),
|
||||
|
||||
});
|
Loading…
Reference in New Issue
Block a user