Validar formulários Bootstrap 5 com JavaScript sem jQuery

Formulários Bootstrap 5 com restrições HTML, checkValidity e setCustomValidity: marcação correta, mensagens e validação no servidor.

Validação no Bootstrap 5

Bootstrap 5 não precisa de jQuery. Combine restrições HTML como required e type=email com classes de feedback e JavaScript nativo. O formulário de exemplo envia para /feedback: substitua pelo destino real. Inclua o CSS do Bootstrap 5.

Marcação do formulário

Adicione needs-validation e novalidate ao formulário. novalidate desativa mensagens automáticas do navegador, mas mantém a API de validação. Os campos usam form-control, rótulos associados, name, required e invalid-feedback. Exiba o HTML como código, sem inserir um formulário ativo no artigo.

<form class="needs-validation" novalidate method="post" action="/feedback">
  <div class="mb-3">
    <label class="form-label" for="name">Name</label>
    <input class="form-control" id="name" name="name" required>
    <div class="invalid-feedback">Enter your name.</div>
  </div>
  <div class="mb-3">
    <label class="form-label" for="email">Email</label>
    <input class="form-control" id="email" name="email" type="email" required>
    <div class="invalid-feedback">Enter a valid email address.</div>
  </div>
  <button class="btn btn-primary" type="submit">Send</button>
</form>

Envio com JavaScript nativo

Escute submit. form.checkValidity() verifica regras; se falhar, preventDefault() impede o envio e was-validated mostra as mensagens Bootstrap. Quando válido, o navegador envia normalmente para /feedback. Aplicações reais também precisam de token CSRF e verificações no servidor.

document.querySelectorAll('.needs-validation').forEach((form) => {
  form.addEventListener('submit', (event) => {
    if (!form.checkValidity()) {
      event.preventDefault();
      event.stopPropagation();
    }
    form.classList.add('was-validated');
  });
});

Regras próprias

Se incluir confirmEmail, compare-o a email com setCustomValidity(). Verifique os dois campos no evento input para limpar um erro anterior com string vazia. O trecho opcional requer um campo id confirmEmail; traduza a mensagem exibida.

const email = document.querySelector('#email');
const confirmation = document.querySelector('#confirmEmail');
function validateMatch() {
  confirmation.setCustomValidity(
    confirmation.value === email.value ? '' : 'Email addresses differ'
  );
}
email.addEventListener('input', validateMatch);
confirmation.addEventListener('input', validateMatch);

Acessibilidade e segurança

Bootstrap informa que alguns estilos personalizados de validação no cliente não são apresentados corretamente às tecnologias assistivas. Teste teclado e leitor de tela ou prefira mensagens nativas e retornos do servidor. Valide e autorize toda requisição também no servidor.

Teste prático

Experimente campos vazios, emails incorretos, dados válidos e envios repetidos. Em envio AJAX, retire was-validated ao redefinir a aparência. Associe mensagens claras aos campos; classes CSS não substituem explicações acessíveis.

Fontes

Bootstrap 5.3: https://getbootstrap.com/docs/5.3/forms/validation/ ; API HTML: https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation .