Como considerar no front e no back end as mesmas validações / modelo, sem repeti-las

Fala aí Elías, tudo bem? O que você pode fazer é com que seu back devolva o schema de cada modelo através de algum endpoint.

Imagine que você tenha um modelo para cliente:

nome: obrigado, no minimo cinco letras e somente letras
idade: no minimo 1, no maximo 99 e somente número

Uma possível solução seria você criar um endpoint, por exemplo: /client/schema ou /client/fields, que iria devolver algo do tipo:

{
    nome: { required: true, minLength: 5, pattern: ([aA-zZ\s]+), type: "text" },
    age: { required: true, min: 1, max: 99, type:  "number" }
}

Agora com essas informações você pode montar o formulário com as validações.

Espero ter ajudado.

Olá Matheus, tudo bem e contigo?

1. esse endpoint seria um arquivo separado? Onde ele seria considerado na estrutura do servidor node (na pasta modelos, na pasta dos arqs. estáticos...) ? Ele seria enviado para o navegador na mesma requisição do formulário?

2. existe algum curso relacionado ao JavaScript que trata da utilização das mesmas validações no front e no back end, e/ou também sobre schemas / endpoints?

Aguardo, desde já obrigado!

Atenciosamente.

esse endpoint seria um arquivo separado? Onde ele seria considerado na estrutura do servidor node (na pasta modelos, na pasta dos arqs. estáticos...) ? Ele seria enviado para o navegador na mesma requisição do formulário?

Esse endpoint será uma nova rota e uma nova função no seu controller.

existe algum curso relacionado ao JavaScript que trata da utilização das mesmas validações no front e no back end, e/ou também sobre schemas / endpoints?

Aqui na Alura acredito que não.

Abraços.

Bom dia, Elías! Como vai?

Apenas um adendo importante: Validações no front-end normalmente são feitas através de JS o qual pode ser desabilitado pelo usuário. Portanto, o correto é sempre fazer as validações no back-end de modo a garantir que elas irão ocorrer. No front-end vc pode até disponibilizá-las, mas não é garantido que elas sejam executadas.

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Matheus,

Este endpoint seria enviado para o navegador na mesma requisição do formulário? Como ficaria no front end, seria um arquivo JavaScript que faria a requisição deste schema/JSON de validações ao back end ?

Aguardo, desde já obrigado.

Atenciosamente.

Olá Gabriel! Tudo certo e contigo?

Obrigado pelo adendo. Isso, como ouvi várias vezes: se for para escolher entre back e front end, as validações sempre devem ser consideradas / garantidas no back end.

Bem lembrado, o usuário pode desativá-las, mesmo assim, na minha opinião, acredito ser interessante agilizar o retorno ao usuário, considerando as validações também no front end.

Comento porque lembrei de experiências próprias no preenchimento de formulários, onde a requisição ao servidor em alguns casos levava um certo tempo para validar/retornar.

Além disso, comentando também porque gostaria (em futuro não muito distante) de integrar o que estou vendo em Node com o curso de PWA (Progressive Web Apps), onde há a experiência offline, ou seja, como não há comunicação com o servidor, gostaria de ter as validações no front end/PWA.

Obrigado, valeu!

Atenciosamente.

Matheus,

Este endpoint seria enviado para o navegador na mesma requisição do formulário? Como ficaria no front end, seria um arquivo JavaScript que faria a requisição deste schema/JSON de validações ao back end ?

Aguardo, desde já obrigado.

Atenciosamente.

Fala ai Elías, esse endpoint iria ser requisitado quando o usuário navegar até a tela do formulário.

Uma vez estando na tela, a requisição será feita, os campos serão retornados e o formulário será criado.

Espero ter ajudado.

Olá Matheus,

Você poderia passar um exemplo básico? Me refiro ao formulário, onde ficaria a requisição, como ficariam os campos e suas validações no formulário, e o código do arquivo com as validações requisitado / retornado pela requisição do formulário.

Aguardo, desde já obrigado!

Atenciosamente.

Fala ai Elias, eu tenho mas não posso passar, são códigos confidenciais de um projeto que eu fiz.

Mas a ideia é mais ou menos assim:

Ao acessar o endpoint /clientes/campos a API vai retornar algo do tipo

[
    { name: 'nome', maxLength: 120, required: true, type: 'text', component: 'input' },
    { name: 'idade', max: 100, min: 1, required: true, type: 'number', component: 'input' }
]

Ai na tela você vai precisar percorrer esse array e ir montando os campos de acordo aos mesmos.

Espero ter ajudado.

Olá Matheus!

Ajudou sim, só mais uma coisa... :D

Com o teu código acima eu monto o elemento html com os respectivos atributos de validação, correto?

Porém, como fazer outras validações mais específicas que são feitas no backend também no front? Por exemplo, verificar se foi digitado um valor monetário e exibir uma mensagem personalizada, conforme foi feito no backend:

// src/app/modelos/livro.js

const { check } = require('express-validator/check');

class Livro {
    static validacoes() {
        return [
            check('preco').isCurrency().withMessage('O preço precisa ter um valor monetário válido!') // <-- validação específica com mensagem personalizada
        ];
    }
}

module.exports = Livro;

Aguardo, desde já obrigado!

Atenciosamente.

Fala ai Elías, vamos lá:

Com o teu código acima eu monto o elemento html com os respectivos atributos de validação, correto?

Correto

Porém, como fazer outras validações mais específicas que são feitas no backend também no front?

Nesse exemplo ai já começa ficar um pouco mais complicado. Talvez o que você pode tentar fazer é utilizar o pattern e verificar se o valor é monetário ou não.

Espero ter ajudado.

Olá Matheus!

Ajudou metade do caminho hehehe, é que eu realmente queria saber como ter as mesma validações no back e no front em produção, como as empresas fazem no dia a dia (as empresas que realmente não duplicam código de validação...).

O pattern foi uma ótima ideia tua e resolveria o valor monetário, porém pelo meu entendimento a mensagem personalizada (se valor monetário incorreto) ainda teria que ser duplicada...

Para não estender mais o assunto, estou finalizando o tópico.

Obrigado pelo empenho nos retornos a este aluno insistente haiohaiohaio, valeu!

Atenciosamente.

O pattern foi uma ótima ideia tua e resolveria o valor monetário, porém pelo meu entendimento a mensagem personalizada (se valor monetário incorreto) ainda teria que ser duplicada...

Na verdade você pode ter um dicionário de erros, o mesmo pode ser uma biblioteca compartilhada entre back e front.

Ou seguindo aquele esquema de validação, o back pode devolver os possíveis erros:

{ pattern: ALGUMA_EXPRESSA, patternError: ALGUM_MENSAGEM }

Existem N maneiras de se fazer isso e garantir que a validação fique apenas no back e replique no front.

Espero ter ajudado.

Olá Matheus, ajudou sim, obrigado!

Atenciosamente.

Magina, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.