Como validar dados de formulários com PHP e Fetch API
Validando de dados de formulários com técnicas modernas de programação
01/04/2024
Como validar dados de formulários com PHP e Fetch API
Introdução
Normalmente, desenvolvedores aplicam validações tanto na interface do usuário, com JavaScript, quanto no servidor, para assegurar que os dados enviados estejam corretos. Contudo, essa abordagem pode resultar em duplicidade de esforços e código.
Este artigo apresenta uma técnica que permite realizar validações exclusivamente no servidor, mas de forma que a experiência do usuário seja tão ágil e responsiva quanto às validações feitas diretamente na interface do usuário. Utilizamos Fetch API para comunicar com o servidor sem a necessidade de recarregar a página ou redirecionar para outra URL, mantendo a interação suave e direta.
Com essa metodologia, é possível exibir mensagens de erro e alertas diretamente no formulário com a mesma eficiência das validações tradicionais do lado do cliente, mas com a robustez e segurança da validação no servidor.
Código de Exemplo
Primeiro, apresentamos o formulário HTML. Este código cria a estrutura do formulário que será exibido ao usuário, incluindo campos para nome, e-mail e mensagem, além de um botão de envio. A interação com o servidor, sem recarregar a página, é feita através de JavaScript utilizando a Fetch API para enviar os dados e tratar a resposta do servidor.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Formulário de Contato</title>
</head>
<body>
<form id="contactForm">
<label for="name">Nome:</label>
<input type="text" id="name" name="name" placeholder="Seu nome">
<br>
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" placeholder="Seu e-mail">
<br>
<label for="message">Mensagem:</label>
<textarea id="message" name="message" placeholder="Sua mensagem"></textarea>
<br>
<button type="submit">Enviar</button>
</form>
<script>
document.getElementById('contactForm').addEventListener('submit', async (e) => {
e.preventDefault();
try {
const response = await fetch('process_form.php', {
method: 'POST',
body: new FormData(e.target),
headers: {
'Accept': 'application/json',
},
});
const data = await response.json();
if (data.status === 'OK') {
e.target.reset(); // Limpa o formulário
alert(data.message); // Exibe mensagem de sucesso
} else if (data.status === 'Erro') {
alert(data.message); // Exibe mensagem de erro
document.getElementById(data.field)?.focus(); // Foca no campo com erro
}
} catch (error) {
console.error('Error:', error); // Trata erros de conexão ou de servidor
}
});
</script>
</body>
</html>A seguir, temos o script PHP responsável por processar os dados enviados pelo formulário. Este código realiza a validação dos dados no lado do servidor e retorna uma resposta em JSON, indicando o sucesso ou falha da operação, além de fornecer mensagens de erro específicas que podem ser exibidas ao usuário.
<?php
header('Content-Type: application/json');
// Simula a validação dos campos
$name = $_POST['name'] ?? '';
$email = $_POST['email'] ?? '';
$message = $_POST['message'] ?? '';
$response = ['status' => 'OK', 'message' => '', 'field' => ''];
if (empty($name)) {
$response = ['status' => 'Erro', 'message' => 'Por favor, preencha o nome.', 'field' => 'name'];
} elseif (empty($email)) {
$response = ['status' => 'Erro', 'message' => 'Por favor, forneça um e-mail válido.', 'field' => 'email'];
} elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$response = ['status' => 'Erro', 'message' => 'O e-mail fornecido não é válido.', 'field' => 'email'];
} elseif (empty($message)) {
$response = ['status' => 'Erro', 'message' => 'Por favor, escreva uma mensagem.', 'field' => 'message'];
} else {
//
// Adicione aqui o código para enviar a mensagem por e-mail
//
// Se passar por todas as validações, considera a mensagem como enviada com sucesso
$response = ['status' => 'OK', 'message' => 'Mensagem enviada com sucesso!', 'field' => ''];
}
echo json_encode($response);
?>Compatibilidade
O código PHP apresentado acima é compatível desde a versão 5.4 do PHP até as mais recentes. Confira a versão do PHP em sua hospedagem para assegurar a compatibilidade.
Clientes da MCO2 podem ficar tranquilos, pois nossos servidores estão preparados para executar este código sem problemas. Além disso, pelo painel de hospedagem da MCO2, é possível escolher a versão do PHP desejada, garantindo flexibilidade e controle total sobre seu ambiente de hospedagem.
Explicando o Código
A seguir, vamos detalhar cada parte do código fornecido, começando pelo formulário HTML e seguindo com o script PHP. Entenderemos como cada segmento contribui para validação no lado do servidor enquanto mantém uma interação fluida e responsiva no lado do cliente.
Formulário HTML
O formulário inclui campos para o nome, o e-mail e a mensagem do usuário, cada um acompanhado de um rótulo para melhorar a acessibilidade. Os rótulos estão vinculados aos seus respectivos campos de entrada, utilizando as tags <label> para os rótulos, <input> para o nome e e-mail, e <textarea> para a mensagem.
<form id="contactForm">
<label for="name">Nome:</label>
<input type="text" id="name" name="name" placeholder="Seu nome">
<br>
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" placeholder="Seu e-mail">
<br>
<label for="message">Mensagem:</label>
<textarea id="message" name="message" placeholder="Sua mensagem"></textarea>
<br>
<button type="submit">Enviar</button>
</form>JavaScript para Submissão do Formulário
Este JavaScript intercepta o evento de submissão do formulário, enviando os dados para o servidor de forma assíncrona usando a Fetch API. Isso evita o recarregamento da página, mantendo a interação contínua. Ao receber a resposta do servidor, o script verifica o status. Se for 'OK', limpa o formulário e mostra uma mensagem de sucesso. Se houver um erro, exibe a mensagem de erro e foca no campo problemático.
document.getElementById('contactForm').addEventListener('submit', async (e) => {
e.preventDefault();
try {
const response = await fetch('process_form.php', {
method: 'POST',
body: new FormData(e.target),
headers: {
'Accept': 'application/json',
},
});
const data = await response.json();
if (data.status === 'OK') {
e.target.reset(); // Limpa o formulário
alert(data.message); // Exibe mensagem de sucesso
} else if (data.status === 'Erro') {
alert(data.message); // Exibe mensagem de erro
document.getElementById(data.field)?.focus(); // Foca no campo com erro
}
} catch (error) {
console.error('Error:', error); // Trata erros de conexão ou de servidor
}
});Script PHP para Processamento e Validação
O script PHP recebe os dados do formulário, realiza a validação e retorna uma resposta em JSON. Primeiro, define o cabeçalho de resposta como JSON. Em seguida, verifica cada campo recebido pelo método POST. Se algum campo estiver vazio ou não passar na validação (como um e-mail inválido), o script prepara uma resposta indicando erro, com uma mensagem específica e o nome do campo. Caso contrário, retorna uma resposta de sucesso.
<?php
header('Content-Type: application/json');
$name = $_POST['name'] ?? '';
$email = $_POST['email'] ?? '';
$message = $_POST['message'] ?? '';
$response = ['status' => 'OK', 'message' => '', 'field' => ''];
if (empty($name)) {
$response = ['status' => 'Erro', 'message' => 'Por favor, preencha o nome.', 'field' => 'name'];
} elseif (empty($email)) {
$response = ['status' => 'Erro', 'message' => 'Por favor, forneça um e-mail válido.', 'field' => 'email'];
} elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$response = ['status' => 'Erro', 'message' => 'O e-mail fornecido não é válido.', 'field' => 'email'];
} elseif (empty($message)) {
$response = ['status' => 'Erro', 'message' => 'Por favor, escreva uma mensagem.', 'field' => 'message'];
} else {
//
// Adicione aqui o código para enviar a mensagem por e-mail
//
// Se passar por todas as validações, considera a mensagem como enviada com sucesso
$response = ['status' => 'OK', 'message' => 'Mensagem enviada com sucesso!', 'field' => ''];
}
echo json_encode($response);
?>Conclusão
Centralizar as validações no lado do servidor, utilizando Fetch API para a comunicação assíncrona, oferece uma abordagem robusta e segura para manipulação de dados em aplicações web. Essa técnica elimina a redundância da validação no lado do cliente, simplifica o desenvolvimento e mantém a experiência do usuário ágil e intuitiva.
Adotar essa estratégia não apenas reforça a segurança dos dados, mas também aprimora a eficiência do desenvolvimento, permitindo que os programadores se concentrem em uma única camada de validação. O resultado é uma aplicação mais confiável e uma melhor experiência de usuário.