Validação inline (matinp) Componentes

O que é

É a conferência campo a campo: a pessoa digita o e-mail, passa para o próximo campo e, se estiver faltando o "@", o campo fica vermelho na hora com "E-mail inválido.". Você liga isso colocando sw-matinp no <input> e escreve as regras como atributos: sw-matinp-req (obrigatório), sw-matinp-email, sw-matinp-minlen="8"… Pode juntar várias regras no mesmo campo. Cada regra tem uma mensagem pronta em português, que você pode trocar. De quebra, ele formata telefone, CPF, CEP e outros enquanto a pessoa digita.

Precisa do CSS e do JavaScript do SWCore. Por padrão a conferência acontece quando a pessoa sai do campo. Depois que um campo deu erro, ele passa a conferir a cada tecla, para o vermelho sumir assim que a pessoa corrigir. Com erro, a caixa sw-fld ganha a classe is-err e a mensagem aparece embaixo; certo, ganha is-ok (verde). As regras são testadas sempre nesta ordem: obrigatório, e-mail, site, mínimo de letras, máximo de letras, valor mínimo, valor máximo, igual a outro campo, formato próprio — e só a primeira que falhar aparece.

Quando usar

• Cadastro e checkout: avisar do erro no campo, na hora, em vez de só no fim.
• Confirmar senha ou e-mail: "precisa ser igual ao outro campo" — sw-matinp-match.
• Telefone, CPF, CEP: formatar enquanto digita e conferir no mesmo campo — sw-matinp-mask.
• Erro que só o servidor sabe ("CPF já cadastrado"): mostrar no campo certo, pelo JavaScript.
• Para travar o envio e conferir o formulário inteiro de uma vez, use junto (ou no lugar) a Validação de formulário (sw-valid).

Comece aqui

1. 1

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

   <link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.css">
   <!-- … sua página … -->
   <script src="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.js"></script>

2. 2

   Monte o campo normalmente (com sw-fld) e acrescente sw-matinp + as regras no input. Clique no campo e saia sem preencher.

   Seu e-mail

   <div sw-fld="float">
     <input sw-inp id="email" type="email" placeholder=" "
            sw-matinp sw-matinp-req sw-matinp-email>
     <label for="email">Seu e-mail</label>
   </div>

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-frm action="/cadastro" method="post">
  <div sw-fld="float">
    <input sw-inp id="nome" name="nome" placeholder=" "
           sw-matinp sw-matinp-req sw-matinp-minlen="3">
    <label for="nome">Nome completo</label>
  </div>
  <div sw-frm-row>
    <div sw-fld="float">
      <input sw-inp id="email" name="email" type="email" placeholder=" "
             sw-matinp sw-matinp-req sw-matinp-email>
      <label for="email">E-mail</label>
    </div>
    <div sw-fld="float">
      <input sw-inp id="cel" name="cel" inputmode="numeric" placeholder=" "
             sw-matinp sw-matinp-req sw-matinp-mask="telefone">
      <label for="cel">Celular</label>
    </div>
  </div>
  <div sw-frm-row>
    <div sw-fld="float">
      <input sw-inp id="senha" name="senha" type="password" placeholder=" "
             sw-matinp sw-matinp-req sw-matinp-minlen="8" sw-matinp-hint="8 caracteres ou mais">
      <label for="senha">Senha</label>
    </div>
    <div sw-fld="float">
      <input sw-inp id="senha2" type="password" placeholder=" "
             sw-matinp sw-matinp-req sw-matinp-match="#senha"
             sw-matinp-msg-match="As senhas não são iguais">
      <label for="senha2">Repita a senha</label>
    </div>
  </div>
  <div sw-frm-act><button sw-btn="pri" type="submit">Criar conta</button></div>
</form>

<div sw-fld>
  <label for="cpf">CPF</label>
  <input sw-inp id="cpf" inputmode="numeric" sw-matinp sw-matinp-mask="cpf">
</div>

<script>
  const cpf = document.getElementById('cpf');
  fetch('/api/cpf-existe?cpf=' + cpf.value)
    .then((r) => r.json())
    .then((res) => {
      if (res.existe) cpf._swMatinp.setError('Este CPF já está cadastrado');
      else cpf._swMatinp.clearError();
    });
</script>

<div sw-fld>
  <label for="qtd">Quantidade (só pares)</label>
  <input sw-inp id="qtd" type="number" sw-matinp sw-matinp-par>
</div>

<script>
  // a função recebe (valor, parâmetro, campo) e devolve
  // true quando está certo, ou o TEXTO do erro quando está errado
  SW.Matinp.addRule('par', (valor) =>
    !valor || Number(valor) % 2 === 0 || 'Use um número par.'
  );
</script>

<div sw-fld>
  <label for="news">E-mail para a newsletter</label>
  <input sw-inp id="news" type="email"
         sw-matinp sw-matinp-req sw-matinp-email sw-matinp-validate="input">
</div>
<button sw-btn="pri" id="assinar" disabled>Quero receber</button>

<script>
  const campo = document.getElementById('news');
  const botao = document.getElementById('assinar');
  campo.addEventListener('sw:matinp:valid',   () => { botao.disabled = false; });
  campo.addEventListener('sw:matinp:invalid', () => { botao.disabled = true; });
</script>

Eventos

API (JavaScript)

Precisa de quê

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

Cuidados — erros comuns

• A função de addRule tem que devolver o texto do erro quando falha. Se devolver false, o campo passa como certo.
• A ordem dos atributos não muda nada: as regras são sempre testadas na ordem fixa (obrigatório, e-mail, site, mínimo, máximo, valor mínimo, valor máximo, igual, formato, e depois as suas).
• Sem sw-matinp-req, um campo vazio é considerado certo — as outras regras só valem quando há algo escrito.
• sw-matinp-url exige o começo http:// ou https://. "meusite.com.br" sozinho dá erro.
• Não use sw-matinp-mask e sw-mask no mesmo campo: os dois formatam e brigam. Escolha um.
• O sw-matinp-label cria o rótulo depois do input — certo para sw-fld="float". Na caixa comum, escreva o <label> você mesmo, em cima.
• Em min/max e no minlen com máscara, conta o texto como está na tela (com parênteses, pontos e traço).

O que ele não faz

• Confere um campo por vez, quando a pessoa mexe nele. Ele não impede o envio do formulário: para isso use Validação de formulário (sw-valid).
• A máscara embutida tem 7 formatos (não tem dinheiro nem formato próprio). Para esses, use o componente Máscara.
• Não confere se o CPF/CNPJ é verdadeiro (dígito verificador) — só o formato. Dá para criar isso com addRule.
• É conferência no navegador, para ajudar quem preenche. O servidor precisa conferir de novo, sempre.