Valid no SWCore — documentação e exemplos

O que é

Valida campos usando as regras que você já escreveu no HTML (required, type="email", pattern, etc.) — sem reescrever regras de validação em JS.

Como funciona

Usa field.checkValidity() nativo do navegador. Por padrão valida ao perder o foco (blur) e depois em tempo real (input) uma vez que o campo já foi tocado. Mensagens de erro ganham aria-describedby automaticamente — leitor de tela anuncia o erro certo.

Exemplos

Demo completa Ao vivo

<form sw-valid>
  <div class="sw-form-group">
    <label class="sw-label">E-mail</label>
    <input class="sw-input" type="email" name="email" required>
  </div>
  <div class="sw-form-group">
    <label class="sw-label">Senha</label>
    <input class="sw-input" type="password" id="senha" name="senha" required minlength="6">
  </div>
  <div class="sw-form-group">
    <label class="sw-label">Confirmar senha</label>
    <input class="sw-input" type="password" id="senha2" name="senha2" required
           data-sw-error="As senhas não coincidem.">
  </div>
  <button class="sw-btn sw-btn-pri" type="submit">Enviar</button>
</form>

<script>
// Confirmação de senha não é uma constraint nativa — combine com setCustomValidity(),
// já que sw-valid só orquestra o checkValidity() que a própria constraint nativa usa.
const senha = document.getElementById('senha');
const senha2 = document.getElementById('senha2');
function checarSenhas() {
  senha2.setCustomValidity(senha2.value !== senha.value ? 'x' : '');
}
senha.addEventListener('input', checarSenhas);
senha2.addEventListener('input', checarSenhas);
</script>

Regras nativas disponíveis Ao vivo

required

Campo obrigatório (não vazio).

type="email"

Formato de e-mail válido.

type="url"

URL iniciada com protocolo (http://, https://...).

type="number" min max

Valor numérico dentro do intervalo.

minlength / maxlength

Tamanho mínimo/máximo do texto.

pattern

Expressão regular customizada.

Nenhuma é do SW — são padrões nativos do HTML5. O sw-valid só cuida de quando/como mostrar o erro.

Modos de validação — sw-valid-live Ao vivo

<form sw-valid>...</form>                    <!-- valida a cada tecla + ao sair do campo -->
<form sw-valid sw-valid-live="blur">...</form>  <!-- só ao sair do campo (sem feedback por tecla) -->
<form sw-valid sw-valid-live="false">...</form> <!-- só ao tentar enviar o formulário -->

Mensagem de erro customizada — data-sw-error Ao vivo

<input class="sw-input" name="cpf" required
       pattern="\d{3}\.\d{3}\.\d{3}-\d{2}"
       data-sw-error="Use o formato 000.000.000-00.">

Atributos

sw-valid

no <form> — ativa a validação

sw-valid-live

"true" (padrão, valida ao digitar depois do 1º toque), "blur" (só ao sair do campo), "false" (só no submit)

data-sw-error

no campo — mensagem de erro customizada, sobrepõe a padrão do navegador (que varia por idioma)

Variantes

Nenhum.

Eventos

sw:valid-error

no submit, se algum campo for inválido

sw:valid-submit

no submit, se tudo for válido — cancele com preventDefault se quiser interceptar

API (JavaScript)

SW.Valid.check(form)

valida por código, retorna true/false

SW.Valid.init(form)

inicializa manualmente (normalmente automático)

Requisitos

Os campos precisam ser elementos de formulário reais com os atributos de validação nativos (required, type, pattern, min/max etc.).

Limitações — o que ele não faz

Só valida o que o HTML já expressa nativamente — regras de negócio complexas (ex.: "esse CPF já existe") continuam por sua conta, disparadas manualmente.

Valid Componentes