SWCore
SWCore / CSS / Formulário que trava (sw-trava)

Formulário que trava (sw-trava) CSS

O botão de enviar só libera quando tudo está válido; o erro só aparece depois que a pessoa mexeu.

O que é

Nada de JS para desabilitar botão. Usa as regras que o HTML já tem (required, type="email", pattern, minlength).

Como funciona

form:has(:invalid) apaga o botão de envio; :user-invalid pinta o campo de vermelho só depois da interação (não grita com a pessoa antes dela digitar). Combina com o sw-fld e com a Validação do SWCore para mensagens.

Exemplos

Preencha para liberar Ao vivo 
<form sw-trava>
  <input sw-inp type="email" required>
  <input sw-inp type="tel" required pattern="[0-9 ()-]{10,}">
  <button sw-btn="pri">Enviar</button>
</form>

Atributos

form[sw-trava]
liga a trava e o destaque de erro/acerto

Variantes

Nenhum.

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

  • swcore.min.css 2.1.0

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

  • A validação no servidor continua obrigatória — a trava é só conforto para quem preenche.
← AnteriorCarrossel de arrastar (sw-trilho) Próximo →Bloco que se adapta (sw-caixa)