Nesse próximo passo nós iremos entender melhor como são feitos os forms em HTML. Além de muito necessários para websites eles ainda servem para iniciarmos uma compreensão de como funcionam as validações no lado do cliente e aprimorar nosso site para que haja uma boa experiência doo usuário. A validação de um formulário pode ser definida como o envio de informações do usuário para que um servidor possa registrá-las e em seguida, caso não haja conformidade nas informações enviadas o usuário possa alterá-las, mas caso as respostas estejam em conformidade o servidor irá registrar todas as informações em um banco de dados.
Sempre que criamos um website devemos garantir que essas validações sejam feitas de forma segura para garantir que usuários mal intencionados não utilizem do envio de um simples formulário para enviar dados perigosos para o seu servidor. Essa é uma área específica do desenvolvimento web e eu aconselho que cada um tenha certa noção do que podem fazer para mitigar danos causados por esses usuários mal intencionados. São diversas ameaças e nem todas tem uma solução, mas há muitos tipos de prevenção, algumas das ameaças mais conhecidas são: Cross-Site Scripting (XSS), SQL injection e Cross-Site Request Forgery (CSRF). Você pode aprender mais sobre a segurança de websites nesse artigo da MDN Web Docks clicando aqui.
O que é a validação de formulários?
Essa questão pode ainda estar na sua cabeça por isso podemos dizer que a validação nada mais é do que um feedback, um retorno sobre os dados que você envia em um formulário. Quando você envia um formulário em uma página web você provavelmente vai receber um retorno como: “Este campo é obrigatório”, “Por favor utilize um e-mail valido” ou “Sua senha deve ter mais do que 8 caracteres”. Estes campos utilizam validadores de formulários que estão lá justamente para evitar que informações equivocadas, inexistentes ou fora dos padrões exigidos para certificar a segurança do usuário, a validação realizada no navegador é chamada de validação do client-side e a que é realizada no servidor é chamada de validação server-side.
Sempre que pensarmos em criar um formulário devemos pensar nos principais meios de mitigar danos caso haja algum tipo de ataque: 1. Devemos coletar os dados corretos no formato correto, 2. Devemos proteger os dados dos nossos usuários e 3. Devemos nos proteger. Essas defesas, quando realizadas no client-side, podemos ser realizadas de duas formas, uma delas é através do próprio HTML e a outra é com o JavaScript.
Usando validação de formulário embutidos
Com a chegada do HTML5 muitas coisas foram implementadas e algumas delas foram relacionadas aos controles de validação de formulário sem necessitar do JavaScript. Isso ocorre pelo uso de alguns atributos nos elementos de formulários como os que veremos a seguir:
required: Serve para especificar quando um formulário precisa ser preenchido antes de ser enviado para o servidor.minlengthemaxlength: Especifica o tamanho mínimo e máximo, respectivamente, dos dados textuais (strings).minemax: Usados principalmente para atribuir valores mínimos e máximos de dados numéricos.type: Muito utilizado para especificar quando os dados precisam ser do tipo numer, email ou algum outro tipo de dado específico.pattern: Especifica uma expressão regular que define um padrão que os dados inseridos precisam seguir, regex ou regular expression é um assunto que vamos abordar futuramente.