Valida o formulário inteiro no envio (ou no blur de cada campo) e injeta a mensagem de erro sozinho.
Diferente do Matinp (regra por campo, dispara no blur), [sw-valid] é o formulário INTEIRO usando validação HTML5 nativa (required, type="email", minlength…), com a mensagem de erro estilizada automaticamente.
Ele desliga a validação visual do navegador (noValidate) e assume o controle: no envio roda checkValidity() campo a campo, marca cada um com .is-err ou .is-ok e cria sozinho um <p class="sw-fld-msg" role="alert"> dentro do [sw-fld] com a mensagem. O texto sai nesta ordem: o seu data-sw-error, senão a mensagem nativa do navegador, senão "Revise este campo.". De quebra ele liga o aria-invalid e o aria-describedby apontando pro erro, então leitor de tela anuncia certo.
Clique em Enviar com os campos vazios pra ver as mensagens.
<form sw-valid>
<div sw-fld>
<label class="is-req" for="email">E-mail</label>
<input sw-inp id="email" type="email" required
data-sw-error="Informe um e-mail válido">
</div>
<div sw-fld>
<label class="is-req" for="senha">Senha</label>
<input sw-inp id="senha" type="password" required minlength="8">
</div>
<div sw-frm-act><button sw-btn="pri" type="submit">Enviar</button></div>
</form>
<!-- sem data-sw-error, aparece a mensagem padrão do navegador --><input sw-inp type="number" required min="1" max="50"
data-sw-error="Escolha de 1 a 50">
<input sw-inp required pattern="[0-9]{5}-?[0-9]{3}"
data-sw-error="Formato: 00000-000">
<select sw-inp required data-sw-error="Escolha um estado">
<option value="">Selecione…</option>
<option value="pe">Pernambuco</option>
</select>Aqui ele fica quieto enquanto você digita — só reclama quando envia.
<!-- não incomoda durante a digitação; checa tudo de uma vez no envio -->
<form sw-valid sw-valid-live="false">
…
</form>Sem demonstração visual — é o JavaScript que intercepta o envio. Veja o código ao lado.
<form sw-valid id="meuForm">…</form>
<script>
const form = document.querySelector('#meuForm');
// passou na validação: cancele o evento pra enviar por fetch
form.addEventListener('sw:valid-submit', (e) => {
e.preventDefault();
fetch('/api/salvar', { method: 'POST', body: new FormData(form) });
});
// reprovou: o envio já foi barrado
form.addEventListener('sw:valid-error', () => {
SW.Alert.err('Revise os campos destacados');
});
</script>sw-valid<form> — liga a validação (sem valor)sw-valid-livedata-sw-errorrequiredtype="email" \| "url" \| "number"minlength \| maxlengthmin \| maxpattern.is-err \| .is-ok.sw-fld-msgsw:valid-errorsw:valid-submitNenhum.
Nenhuma.
