Estou desenvolvendo um sistema bibliotecário, que conta com uma tela de cadastro de aluno e conta com o Yup para fazer a validação dos dados escritos no formulário
// Cria um novo Aluno
async create(req, res) {
const schema = Yup.object().shape({
email: Yup.string()
.email("E-mail inválido")
.required("Obrigatório preencher e-mail"),
cpf: Yup.string()
.matches(
/^\d\.\d\.\d-\d$/,
"CPF deve estar no formato xxx.xxx.xxx-xx"
)
.required("Preencher Cpf é obrigatório"),
telefone: Yup.string().required("Preencher Telefone é obrigatório"),
endereco: Yup.string().required("Preencher Endereço é obrigatório"),
nome: Yup.string().required("Preencher Nome é obrigatório"),
sobrenome: Yup.string().required("Preencher Sobrenome é obrigatório"),
senha: Yup.number().integer().required("Preencher Senha obrigatório"),
});
let lista_erros = [];
try {
await schema.validate(req.body, { abortEarly: false });
const newAluno = await Aluno.create(req.body);
return res.status(201).json(newAluno);
} catch (e) {
// Erros de campos não preenchidos
if (e.name === "ValidationError") {
const erros_validacao = e.inner.map((error) => ({
campo: error.path,
mensagem: error.message,
}));
lista_erros = [...lista_erros, ...erros_validacao];
}
// Erros de campos já existentes
if (e.name === "SequelizeUniqueConstraintError") {
if (e.fields.cpf) {
lista_erros.push({ campo: "cpf", mensagem: "CPF já existente" });
}
if (e.fields.PRIMARY) {
lista_erros.push({
campo: "matricula",
mensagem: "Matrícula já existente",
});
}
}
return res.status(400).json({ error: "Erro", detalhes: lista_erros });
}
}
Como fazer para que estas validações, apareçam no front end para o usuário, caso aconteça algum erro no preenchimento do formulário