Validação form[sw-valid]
Validação acessível construída sobre as constraints nativas do HTML5 (required, type="email", pattern, min/max...) — sem reinventar regras, só a experiência visual e o timing de exibição dos erros.
1. Demo completa
Preencha e envie pra ver a validação em tempo real. O submit só passa se todos os campos estiverem válidos — inclusive a confirmação de senha, que não é uma constraint nativa do HTML5, então usa setCustomValidity() (também nativo, só que via JS).
2. Regras nativas disponíveis
Nenhuma é do SW — são constraints padrão do HTML5. O [sw-valid] só cuida de quando e como mostrar o erro.
| Atributo | Valida |
|---|---|
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. |
3. Modos de validação sw-valid-live
Por padrão (true), valida a cada tecla digitada depois que o campo já foi tocado uma vez, além do blur. Ajuste com sw-valid-live:
| Valor | Comportamento |
|---|---|
"true" (padrão) | Valida a cada tecla + ao sair do campo. |
"blur" | Valida só ao sair do campo (sem feedback por tecla). |
"false" | Valida só ao tentar enviar o formulário. |
4. Mensagem de erro customizada data-sw-error
Sem isso, a mensagem é a padrão do navegador (varia por idioma/navegador). Com data-sw-error no campo, você define o texto.
5. API e eventos
| Atributo/Classe | Descrição |
|---|---|
form[sw-valid] | Ativa a validação no submit e no blur/input de cada campo. |
sw-valid-live | true (padrão) | blur | false — controla quando a validação roda antes do submit. |
required, type=, pattern, min, max, minlength, maxlength | Regras nativas do HTML5 — use como sempre usou. |
data-sw-error (no campo) | Mensagem de erro customizada — sobrepõe a mensagem padrão do navegador. |
.is-invalid / .is-valid | Classes aplicadas automaticamente no campo. |
.sw-form-error | Elemento gerado com a mensagem de erro (role="alert"). |
| Reset do formulário | Limpar (type="reset") também limpa os estados/mensagens de validação. |
sw:valid-error / sw:valid-submit | Eventos disparados no formulário. |
SW.Valid.check(form) | API — valida programaticamente, retorna boolean. |