forked from M3-Academy/desafio-react-e-typescript
fix(required-mensage): Concerta mensagens de campo vazio e aplica estilo #13
@ -8,7 +8,7 @@ interface IFormMain {
|
||||
name: string;
|
||||
email: string;
|
||||
cpf: string;
|
||||
datee: string;
|
||||
nowDate: string;
|
||||
tel: string;
|
||||
inst: string;
|
||||
check: boolean;
|
||||
@ -18,7 +18,7 @@ const initialValues = {
|
||||
name: "",
|
||||
email: "",
|
||||
cpf: "",
|
||||
datee: "",
|
||||
nowDate: "",
|
||||
tel: "",
|
||||
inst: "",
|
||||
check: false,
|
||||
@ -43,7 +43,7 @@ const MainForm = () => {
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="name"
|
||||
className={errors.name && touched ? "form-feedback" : ""}
|
||||
className={errors.name && touched ? style["form-feedback"] : ""}
|
||||
/>
|
||||
</div>
|
||||
<div className={style["main-form-item-wrapper"]}>
|
||||
@ -52,7 +52,9 @@ const MainForm = () => {
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="email"
|
||||
className={errors.email && touched ? "form-feedback" : ""}
|
||||
className={
|
||||
errors.email && touched ? style["form-feedback"] : ""
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className={style["main-form-item-wrapper"]}>
|
||||
@ -61,16 +63,23 @@ const MainForm = () => {
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="cpf"
|
||||
className={errors.cpf && touched ? "form-feedback" : ""}
|
||||
className={errors.cpf && touched ? style["form-feedback"] : ""}
|
||||
/>
|
||||
</div>
|
||||
<div className={style["main-form-item-wrapper"]}>
|
||||
<label htmlFor="datee">Data de Nascimento:</label>
|
||||
<Field id="datee" name="datee" placeholder="00.00.0000" />
|
||||
<label htmlFor="nowDate">Data de Nascimento:</label>
|
||||
<Field
|
||||
type="date"
|
||||
id="nowDate"
|
||||
name="nowDate"
|
||||
placeholder="00.00.0000"
|
||||
/>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="date"
|
||||
className={errors.datee && touched ? "form-feedback" : ""}
|
||||
className={
|
||||
errors.nowDate && touched ? style["form-feedback"] : ""
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className={style["main-form-item-wrapper"]}>
|
||||
@ -79,7 +88,7 @@ const MainForm = () => {
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="tel"
|
||||
className={errors.tel && touched ? "form-feedback" : ""}
|
||||
className={errors.tel && touched ? style["form-feedback"] : ""}
|
||||
/>
|
||||
</div>
|
||||
<div className={style["main-form-item-wrapper"]}>
|
||||
@ -88,7 +97,7 @@ const MainForm = () => {
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="inst"
|
||||
className={errors.inst && touched ? "form-feedback" : ""}
|
||||
className={errors.inst && touched ? style["form-feedback"] : ""}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -102,7 +111,9 @@ const MainForm = () => {
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="check"
|
||||
className={errors.check && touched ? "form-feedback" : ""}
|
||||
className={
|
||||
errors.check && touched ? style["form-feedback"] : ""
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
@ -13,6 +13,7 @@
|
||||
.main-form-item-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
label {
|
||||
font-weight: 400;
|
||||
@ -31,6 +32,16 @@
|
||||
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.form-feedback {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
bottom: 60px;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: variables.$color-red;
|
||||
}
|
||||
}
|
||||
|
||||
.main-form-checkbox {
|
||||
@ -58,6 +69,16 @@
|
||||
color: variables.$color-black4;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.form-feedback {
|
||||
position: absolute;
|
||||
// right: 100px;
|
||||
// bottom: 0px;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: variables.$color-red;
|
||||
}
|
||||
}
|
||||
|
||||
.main-form-button {
|
||||
|
@ -78,7 +78,7 @@
|
||||
|
||||
.form-feedback {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
right: -30px;
|
||||
bottom: 45px;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
|
@ -24,12 +24,12 @@ export default Yup.object().shape({
|
||||
cpf: Yup.string()
|
||||
.min(11, getFormatedCPF("111.111.111-11"))
|
||||
.required("*Campo Obrigatório"),
|
||||
datee: Yup.date()
|
||||
.min(getFormatedDate("01/01/1900"))
|
||||
nowDate: Yup.date()
|
||||
.max(8, getFormatedDate(new Date().toLocaleDateString()))
|
||||
.required("*Campo Obrigatório"),
|
||||
tel: Yup.string()
|
||||
.min(11, getFormatedTel("(22)99999-9999"))
|
||||
.required("*Campo Obrigatório"),
|
||||
.required("*Campo Obrigatório")
|
||||
.min(11, getFormatedTel("(22)99999-9999")),
|
||||
inst: Yup.string().min(3, getFormatedInst("@seuuser")).notRequired(),
|
||||
check: Yup.boolean()
|
||||
.oneOf([true], "Você deve aceitar os termos!")
|
||||
|
Loading…
Reference in New Issue
Block a user