Validação de formulário JavaScript

O que é

Você escreve as regras do jeito normal do HTML — required (obrigatório), type="email", minlength="8", min/max, pattern — e coloca sw-valid na tag <form>. Pronto: no lugar do balãozinho feio do navegador, cada campo errado fica vermelho com a mensagem embaixo, no visual do SW Core. Se a pessoa clicar em Enviar com erro, o envio é barrado e o cursor vai para o primeiro campo errado. A mensagem pode ser sua, escrita em data-sw-error.

Precisa do CSS e do JavaScript do SW Core. Ele desliga o balão do navegador e assume a conferência. Enquanto a pessoa preenche, cada campo é conferido quando ela sai dele (e, depois, a cada tecla, para o erro sumir assim que corrigir). No envio, confere todos. Campo errado ganha a classe is-err; campo certo e preenchido ganha is-ok — no próprio campo e também na caixa sw-fld em volta (é isso que deixa o rótulo flutuante vermelho/verde) e na <div sw-select>, quando for um Select (JS). A mensagem é criada sozinha dentro da caixa sw-fld, e o leitor de tela já anuncia o erro. A mensagem sai nesta ordem: a sua (data-sw-error), senão a do navegador, senão "Revise este campo.".

Quando usar

• Formulário de contato, orçamento, cadastro: não deixar chegar mensagem sem e-mail ou sem telefone.
• Checkout: conferir tudo de uma vez antes de ir para o pagamento.
• Envio por AJAX (sem recarregar a página): o evento sw:valid-submit avisa que está tudo certo, e você envia com fetch.
• Formulário curto que não deve "reclamar" enquanto a pessoa digita: sw-valid-live="false", confere só no envio.
• Para regras que o HTML não tem (confirmar senha, formato próprio, erro vindo do servidor) e aviso campo a campo, veja a Validação inline (sw-matinp).

Comece aqui

1. 1

   Coloque o SW Core na página: o CSS no <head> e o JavaScript antes de fechar o </body>.

   <link rel="stylesheet" href="swcore/swcore.min.css">
   <!-- … sua página … -->
   <script src="swcore/swcore.min.js"></script>

2. 2

   Coloque sw-valid no <form> e as regras normais do HTML nos campos. Clique em Enviar com o campo vazio. (Nos exemplos desta página o envio é bloqueado para você continuar aqui.)

   E-mail

   Enviar

   <form sw-valid action="/contato" method="post">
     <div sw-fld>
       <label class="is-req" for="email">E-mail</label>
       <input sw-inp id="email" name="email" type="email" required
              data-sw-error="Informe um e-mail válido">
     </div>
     <button sw-btn="pri" type="submit">Enviar</button>
   </form>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<form sw-valid sw-frm action="/contato" method="post">
  <div sw-frm-row>
    <div sw-fld>
      <label class="is-req" for="nome">Nome</label>
      <input sw-inp id="nome" name="nome" required minlength="3"
             data-sw-error="Conta pra gente seu nome">
    </div>
    <div sw-fld>
      <label class="is-req" for="tel">WhatsApp</label>
      <input sw-inp id="tel" name="tel" type="tel" sw-mask="telefone" required minlength="14"
             data-sw-error="Número com DDD">
    </div>
  </div>
  <div sw-fld>
    <label class="is-req" for="email">E-mail</label>
    <input sw-inp id="email" name="email" type="email" required
           data-sw-error="Informe um e-mail válido">
  </div>
  <div sw-fld>
    <label for="msg">Mensagem</label>
    <textarea sw-inp id="msg" name="msg" maxlength="500"></textarea>
  </div>
  <div sw-fld>
    <label sw-chk>
      <input type="checkbox" name="autorizo" required data-sw-error="Precisamos da sua autorização">
      Autorizo o contato por WhatsApp
    </label>
  </div>
  <div sw-frm-act>
    <button sw-btn="ghost sec" type="reset">Limpar</button>  <!-- também limpa os erros -->
    <button sw-btn="pri" type="submit">Enviar</button>
  </div>
</form>

<form sw-valid sw-frm id="news">
  <div sw-fld>
    <label class="is-req" for="email">E-mail para a newsletter</label>
    <input sw-inp id="email" name="email" type="email" required
           data-sw-error="Informe um e-mail válido">
  </div>
  <div sw-frm-act><button sw-btn="pri" type="submit">Assinar</button></div>
</form>

<script>
  const form = document.getElementById('news');

  // tudo certo: cancele o envio normal e mande por fetch
  form.addEventListener('sw:valid-submit', async (e) => {
    e.preventDefault();
    await fetch('/newsletter', { method: 'POST', body: new FormData(form) });
    SW.Alert.ok('Inscrição feita!');
  });

  // algo errado: o envio já foi barrado e o cursor está no campo
  form.addEventListener('sw:valid-error', () => {
    SW.Alert.err('Confira os campos destacados');
  });
</script>

<form sw-valid sw-frm id="etapa1">
  <div sw-fld>
    <label class="is-req" for="cep">CEP</label>
    <input sw-inp id="cep" required pattern="[0-9]{5}-?[0-9]{3}" data-sw-error="Formato: 00000-000">
  </div>
  <div sw-frm-act>
    <button sw-btn="pri" type="button" id="proximo">Próximo</button>
  </div>
</form>

<script>
  document.getElementById('proximo').addEventListener('click', () => {
    if (SW.Valid.check('#etapa1')) {
      // tudo certo: mostre a próxima etapa
    }
  });
</script>

Eventos

API (JavaScript)

Precisa de quê

• swcore.min.css e swcore.min.js.
• Cada campo dentro de uma caixa <div sw-fld> — é nela que a mensagem entra.

Cuidados — erros comuns

• sw-valid só funciona na tag <form>. Numa <div> não faz nada.
• O botão de enviar precisa ser type="submit" dentro do form. Um botão type="button" não dispara a conferência (use SW.Valid.check() nele).
• Campo com disabled é ignorado na conferência.
• Sem data-sw-error, a mensagem muda de navegador para navegador e fica no idioma do visitante. Para um texto igual para todos, escreva o seu.
• Deixe espaço entre os campos (use sw-frm): a mensagem aparece embaixo do campo sem empurrar nada.
• maxlength não gera erro ao digitar: o navegador simplesmente não deixa passar do limite.

O que ele não faz

• Só entende as regras do HTML. "Senha igual à outra", "CPF válido" ou "e-mail já cadastrado" precisam de sw-matinp ou do seu código.
• É conferência no navegador. O servidor precisa conferir de novo, sempre.