Você está na página 1de 2

por favor analise os possíveis erros neste código, pois o mesmo não valida o formulário

e o botão de enviar não funciona:

import { useState } from "react"; import { registerFormSchema } from


"./registerForm.schema.js" import { useNavigate } from "react-router-dom"; import api
from "../../../services"; import Input from "../input"; import { useForm } from "react-
hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import style
from "../RegisterForm/style.module.scss" import { InputPassord } from
"../inputPassword"; export const RegisterForm = () => { const { register, handleSubmit,
formState: { errors, isDirty, isValid }, } = useForm({ resolver:
zodResolver(registerFormSchema), }); const [ loading, setLoading ] = useState(false);
const [ isHidden, setIsHidden ] = useState(true); const navigate = useNavigate(); const
userRegister = async (payload) => { try { setLoading(true); await api.post("/users",
payload); navigate("/"); alert("Cadastro realizado com sucesso !"); } catch (error)
{ console.log(error); if(error.response?.data === "Email already exists"){ alert("Usuário
já cadastrado!"); } } finally { setLoading(false); } }; const submit = (payload) =>
{ userRegister(payload); }; return( <form className={style.registerBox}
onSubmit={handleSubmit(submit)}> <h1 className="title1">Crie sua conta</h1>
<p>Rápido e grátis, vamos nessa</p> < Input label="Nome" type="text"
placeholder="Digite seu nome" error={errors.name} {...register("name")}
disabled={loading} /> < Input label="Seu e-mail" type="text" placeholder="Digite aqui
seu e-mail" error={errors.email} {...register("email")} disabled={loading} /> <
InputPassord className={style.inputPassord} label="Crie uma senha"
type={isHidden ? "password" : "text"} placeholder="Digite aqui sua nova senha!"
error={errors.password} {...register("password") } disabled={loading} /> <
InputPassord label="Confirme sua senha !" type="password" placeholder="Confirme a
senha digitada !" error={errors.confirmPassword} {...register("confirmPassword")}
disabled={loading} /> < Input label="Bio" type="text" placeholder="Fale sobre você"
disabled={loading} /> < Input label="Contato" type="text" placeholder="Opção de
contato" disabled={loading} /> <label>Selecionar um Módulo</label> <select
{...register("module")}> <option selected value="1">Primeiro Módulo (Introdução ao
Frontend)</option> <option value="2">Segundo Módulo (Frontend
Avançado)</option> <option value="3">Terceiro Módulo (Introdução ao
Backend)</option> <option value="4">Quarto Módulo (Backend Avançado)</option>
</select> <button type="submit" className="primario-negativo" disabled={!isValid || !
isDirty}> {loading ? "Cadastrando..." : "Cadastrar"} </button> </form> ) }
Copiar

Pelo que eu posso ver, o código parece estar bem estruturado e não há erros de sintaxe
óbvios. No entanto, aqui estão algumas coisas que você pode verificar:
1. Validação do formulário: Certifique-se de que o esquema de
validação registerFormSchema está configurado corretamente. Verifique se
todos os campos necessários estão incluídos e as regras de validação estão
corretas.
2. Botão de envio: O botão de envio está desativado se o formulário não for válido
ou se não estiver sujo (!isValid || !isDirty). Isso significa que o botão de
envio não funcionará até que todas as entradas do formulário sejam válidas e
pelo menos uma entrada do formulário tenha sido alterada. Verifique se você
está preenchendo todos os campos corretamente e fazendo alterações no
formulário.
3. API: Verifique se a API está funcionando corretamente. Você pode fazer isso
testando a API separadamente com uma ferramenta como o Postman. Certifique-
se de que o endpoint “/users” está correto e que a API está configurada para
aceitar solicitações POST.
4. Navegação: Certifique-se de que a rota “/” para a qual você está tentando
navegar existe em seu aplicativo.
5. Dependências: Verifique se todas as dependências estão instaladas corretamente
e importadas no arquivo. Isso inclui react, react-hook-
form, @hookform/resolvers/zod, react-router-dom, e quaisquer
componentes personalizados que você esteja usando
como Input e InputPassord.
Se após verificar todos esses pontos o problema persistir, sugiro que você tente isolar o
problema. Comente partes do código e veja se o problema ainda ocorre. Isso pode
ajudá-lo a identificar a parte exata do código que está causando o problema. Espero que

isso ajude! Se você tiver mais perguntas, fique à vontade para perguntar. 😊

Você também pode gostar