<h2>Validação de Formulários com JavaScript</h2>
<p>A validação de formulários é a primeira barreira entre dados inválidos e seu banco de dados. Existem duas abordagens: validação HTML5 nativa e validação JavaScript customizada. A validação HTML5 oferece feedback instantâneo com atributos como <code>required</code>, <code>type="email"</code> e <code>pattern</code>, mas é limitada. A validação em JavaScript oferece controle total e mensagens personalizadas.</p>
<p>Comece sempre com HTML5 para criar a camada inicial de proteção, depois reforce com JavaScript no lado do cliente:</p>
<pre><code class="language-html"><form id="formulario">
<input type="text" id="nome" name="nome" required minlength="3">
<input type="email" id="email" name="email" required>
<input type="password" id="senha" name="senha" required minlength="8">
<button type="submit">Enviar</button>
</form></code></pre>
<p>Agora, implemente validações customizadas em JavaScript:</p>
<pre><code class="language-javascript">const form = document.getElementById('formulario');
form.addEventListener('submit', (e) => {
e.preventDefault();
const nome = document.getElementById('nome').value.trim();
const email = document.getElementById('email').value.trim();
const senha = document.getElementById('senha').value;
let erros = [];
if (nome.length < 3) {
erros.push('Nome deve ter pelo menos 3 caracteres');
}
if (!validarEmail(email)) {
erros.push('Email inválido');
}
if (senha.length < 8) {
erros.push('Senha deve ter no mínimo 8 caracteres');
}
if (erros.length > 0) {
mostrarErros(erros);
return;
}
console.log('Formulário válido!');
});
function validarEmail(email) {
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return regex.test(email);
}
function mostrarErros(erros) {
const div = document.getElementById('erros') ||
document.createElement('div');
div.id = 'erros';
div.style.color = 'red';
div.innerHTML = '<ul>' +
erros.map(e => <li>${e}</li>).join('') +
'</ul>';
form.parentNode.insertBefore(div, form);
}</code></pre>
<h2>Submissão de Formulários</h2>
<p>A submissão adequada envolve mais que apenas disparar um evento — requer feedback ao usuário, prevenção de duplo envio e tratamento de respostas do servidor. O método tradicional é usar <code>fetch()</code> ou <code>XMLHttpRequest</code>, mas <code>fetch()</code> é mais moderno e limpo.</p>
<p>O fluxo ideal é: validar → desabilitar botão → enviar → aguardar resposta → restaurar estado:</p>
<pre><code class="language-javascript">const form = document.getElementById('formulario');
const botao = form.querySelector('button[type="submit"]');
form.addEventListener('submit', async (e) => {
e.preventDefault();
if (!validarFormulario(form)) {
return;
}
botao.disabled = true;
botao.textContent = 'Enviando...';
try {
const formData = new FormData(form);
const resposta = await fetch('/api/usuario', {
method: 'POST',
body: formData
});
if (resposta.ok) {
const dados = await resposta.json();
alert('Enviado com sucesso!');
form.reset();
} else {
alert('Erro na submissão. Tente novamente.');
}
} catch (erro) {
console.error('Erro:', erro);
alert('Erro de conexão');
} finally {
botao.disabled = false;
botao.textContent = 'Enviar';
}
});
function validarFormulario(form) {
return form.checkValidity() === true;
}</code></pre>
<h2>FormData: Manipulação Avançada</h2>
<p><code>FormData</code> é uma API nativa que captura dados de formulários incluindo arquivos. É especialmente útil para uploads e envios complexos. Em vez de construir manualmente strings de dados, <code>FormData</code> manipula automaticamente serialização e encoding.</p>
<pre><code class="language-html"><form id="formulario" enctype="multipart/form-data">
<input type="text" name="nome" required>
<input type="email" name="email" required>
<input type="file" name="avatar">
<textarea name="bio"></textarea>
<button type="submit">Enviar</button>
</form></code></pre>
<pre><code class="language-javascript">const form = document.getElementById('formulario');
form.addEventListener('submit', async (e) => {
e.preventDefault();
// FormData captura todos os campos automaticamente
const formData = new FormData(form);
// Adicione dados extras se necessário
formData.append('timestamp', new Date().toISOString());
// Verifique os dados antes de enviar (útil para debug)
for (let [chave, valor] of formData.entries()) {
console.log(${chave}: ${valor});
}
try {
const resposta = await fetch('/api/perfil', {
method: 'POST',
body: formData
// Não defina Content-Type — o navegador faz automaticamente
});
const resultado = await resposta.json();
console.log('Sucesso:', resultado);
} catch (erro) {
console.error('Erro:', erro);
}
});</code></pre>
<h3>Validação com FormData</h3>
<p>Para validações complexas, combine <code>FormData</code> com regras customizadas:</p>
<pre><code class="language-javascript">function validarComFormData(formData) {
const erros = [];
// Validar nome
const nome = formData.get('nome');
if (!nome || nome.trim().length < 3) {
erros.push('Nome inválido');
}
// Validar arquivo (se existir)
const arquivo = formData.get('avatar');
if (arquivo && arquivo.size > 5242880) { // 5MB
erros.push('Arquivo muito grande');
}
return erros.length === 0 ? true : erros;
}
// No evento submit:
const validacao = validarComFormData(formData);
if (validacao !== true) {
console.log('Erros:', validacao);
return;
}</code></pre>
<h2>Conclusão</h2>
<p>Dominar validação de formulários em JavaScript envolve três pilares: <strong>validação robuusta no cliente</strong> (HTML5 + JavaScript customizado), <strong>submissão controlada</strong> com feedback ao usuário e prevenção de duplo envio, e <strong>FormData como ferramenta moderna</strong> para capturar e enviar dados complexos incluindo arquivos. Sempre valide também no servidor — nunca confie apenas em validações do cliente. A combinação dessas técnicas resulta em formulários seguros, responsivos e profissionais.</p>
<h2>Referências</h2>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData" target="_blank" rel="noopener noreferrer">MDN Web Docs - FormData API</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation" target="_blank" rel="noopener noreferrer">MDN Web Docs - Form Validation</a></li>
<li><a href="https://javascript.info/fetch" target="_blank" rel="noopener noreferrer">JavaScript.info - Fetch API</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html" target="_blank" rel="noopener noreferrer">W3C - HTML Form Submission</a></li>
<li><a href="https://web.dev/sign-up-form-best-practices/" target="_blank" rel="noopener noreferrer">Web.dev - Sign-up Form Best Practices</a></li>
</ul>