A validação do segundo formulário tem uma vulnerabilidade permitindo passar para a próxima página caso o usuário clique direto no botão "Próximo" sem clicar em nenhum dos campos. Mesma coisa acontece se eu preencher apenas o campo "Nome" sem clicar no campo "CPF" e clicar em "Próximo". Eu testei também o código final disponibilizado por vocês no github e obtive o mesmo problema. Vocês teriam alguma sugestão de como resolver?
hoje, com a Alura e o Google Gemini
Olá Caroline!
Não vi o código mas sei que você precisa registrar cada campo que deseja que seja gerenciado pelo React Hook Form, através da prop ref do campo
Ex:
A propriedade, handleSubmit, é usada para tratar o envio do formulário e capturar os dados preenchidos:
Ex: const TestForm = () => { const { register, handleSubmit, errors } = useForm();
function onSubmit(data) { console.log("Dados enviados: ", data); }
return (
//... campos do formulário ); }A função onSubmit vai receber um objeto com os dados do formulário, é nesse momento que podemos enviar os dados para alguma api do backend ou fazer o que quisermos com eles... E pra validar e mostrar os erros precisamos passar alguns parâmetros para a função register, informando as regras de validação e as mensagens de erro, caso a validação não passe:
<input type="text" name="cpf" ref={register({ required: "Insira o CPF", pattern: { value: /^[0-9]{3}.?[0-9]{3}.?[0-9]{3}-?[0-9]{2}$/i, message: "Insira um CPF válido", }, })} />