🦞InnerFormValidation

JavaScript toolkit · documentação completa

Valide cada detalhe do seu formulário.

Máscaras, regras brasileiras, conteúdo, datas, cartões, callbacks, CEP e geolocalização. Tudo funciona com JavaScript puro. Se jQuery existir, os plugins legados são conectados sem alterar o $.

CDN jsDelivrzero dependenciescallable APIpt · en · es

Primeiro passo

Integre pelo CDN jsDelivr

O caminho recomendado para começar. Não exige jQuery.

<script src="https://cdn.jsdelivr.net/gh/zonaro/InnerFormValidation@master/InnerFormValidation.js"></script>
InnerForm.isValid(form)
InnerForm.validateCPF(value)

00 / comece aqui

Configure o plugin de verdade

A biblioteca lê as classes do HTML e inicializa os formulários automaticamente quando o script termina de carregar. Use a configuração declarativa para a maioria dos casos e a API JavaScript quando precisar controlar um fluxo específico.

Ativação automática

Um formulário é ativado se tiver validate, data-validate="true", data-validation="true" ou forcevalidate. Campos sem uma dessas regras continuam disponíveis pela API, mas não recebem eventos automaticamente. 

<form class="validate">
  <input class="obg email" type="email">
  <button type="submit">Enviar</button>
</form>

<script src="InnerFormValidation.js"></script>

No envio, o plugin marca os campos como visitados e valida o formulário inteiro.

Ativação manual

Para conteúdo inserido depois do carregamento, inicialize máscaras e eventos no novo formulário. Também é possível validar apenas um campo ou passar regras diretamente.

InnerForm.startMasks('#checkout');
InnerForm.startValidation('#checkout');

InnerForm.isValid('#email');
InnerForm('#codigo').isValid('regex');

As funções retornam a coleção encadeável, exceto isValid, que retorna booleano.

Quando validar

Para validar automaticamente enquanto o usuário digita, adicione onkeyup ao campo. O plugin aguarda InnerForm.onTypeTimeout após a última tecla antes de executar as regras e atualizar success ou error.

onkeyup valida enquanto digita, após InnerForm.onTypeTimeout (900 ms por padrão)
notonblur desliga a validação ao perder o foco
notonchange desliga a validação no evento change
InnerForm.verbose = true habilita logs de diagnóstico no console 
<input class="obg email onkeyup">

InnerForm.onTypeTimeout = 1200;

O evento é configurado automaticamente quando o formulário usa validate, data-validate="true", data-validation="true" ou forcevalidate. notonblur e notonchange desativam apenas esses eventos, não o onkeyup.

Classes que controlam a aparência

Ao validar um campo preenchido, o plugin alterna automaticamente success e error. Em layouts Bootstrap ou semelhantes, o ancestral .form-group também recebe has-error quando inválido. 

input.success { border-color: #198754; }
input.error { border-color: #dc3545; }
.form-group.has-error .help { color: #dc3545; }

O campo vazio e opcional permanece sem success. Prefira CSS próprio para manter a aparência consistente com seu design system.

Modo rascunho

Em modo rascunho, apenas a validação de obrigatório é ignorada — campos obrigatórios vazios não bloqueiam o envio. As demais validações continuam valendo: um e-mail inválido, por exemplo, mantém o formulário inválido.

<form class="validate" data-draft>
  <input class="obg email" type="email">
  <button type="submit">Salvar rascunho</button>
</form>

InnerForm.draftMode = true;      // global
InnerForm('#meuForm').draft();   // via API
InnerForm('#meuForm').isDraft(); // true
InnerForm('#meuForm').undraft(); // desativa

Também funciona com a classe draft no formulário. data-draft="false" desativa explicitamente o modo.

Atributos data-* para personalizar a experiência

data-invalidmessageMensagem usada em setCustomValidity(), exibida pela validação nativa do navegador.
data-regex-flagsFlags da regra regex, como i ou g.
data-separator · data-decimal · data-thousandConfiguram separador decimal, casas decimais e separador de milhares em números e dinheiro.
data-addressnotfoundtext · data-notfoundtextTexto exibido quando a consulta ViaCEP não encontra o endereço.
data-addressnotfound · data-notfoundExpressão executada quando o CEP não é encontrado; use para atualizar sua UI.
<input class="mask decimal" data-separator="," data-decimal="2" data-thousand=".">
<input class="cep" data-addressnotfoundtext="Confira o CEP informado.">

Laboratório interativo

Todas as regras, em um lugar

Digite nos campos. A biblioteca aplica a máscara e valida as classes em tempo real. O botão testa o formulário inteiro.

01

Validações básicas

obg · email · url · regex

02

Caracteres e texto

alpha · alphanum · num · upper · lower · nospace

03

Comprimento e números

len 8 · minlen 4 · maxlen 12 · separadores personalizados

04

Documentos, localização e identificadores

Máscara e validação para CPF, CNPJ, CNH, CEP, OAB, UF, UUID, PIX e coordenadas.

05

Data, hora e períodos

date · time · datetime · monthyear · ranges

06

Idade e comparação

minage · maxage · age · after · before · to

07

Força de senha

password strong · medium · weak e atributo data-pwstrength

08

Cartões de crédito

Luhn e bandeiras: Visa, Mastercard, Amex, Elo, Hiper, Diners, Discover, JCB, Aura e outras.

09

Conteúdo e igualdade

contains · containsanychar · containsallchar · notchar · eq · eqv

10 / browser APIs

Autocomplete de CEP

O CEP é o primeiro campo. A busca ViaCEP preenche endereço, complemento, bairro, cidade, UF, IBGE, GIA, DDD, SIAFI e endereço completo.

Classes de autocomplete

Use autocomplete cep mask no campo do CEP para iniciar a busca no evento input. Nos campos de destino, mantenha autocomplete junto da classe correspondente: address, complement, neighborhood, city, state, ibge, gia, ddd, siafi, citystate ou fulladdress. 

InnerForm.searchViaCEP(cep, numero, 0, callback)

O campo de número pode usar homenum, homenumber, number ou num. Campos que não sejam inputs também podem receber os dados como texto.

11 / browser APIs

Geolocalização

Use HTTPS e permissão do navegador. getLocation retorna coordenadas, precisão, altitude, horário e links de mapa; watchLocation acompanha mudanças.

Aguardando ação. 
InnerForm.getLocation(options)
InnerForm.watchLocation(onSuccess, onError, options)
InnerForm.clearLocationWatch(watchId)

12 / extensibilidade

Callbacks declarativos

Callbacks declarativos

Os atributos data-beforevalidatecallback, data-validcallback, data-invalidcallback, data-aftervalidatecallback e data-invalidmessage conectam sua UI ao ciclo de validação.

13 / personalização

CSS por variáveis

O plugin aplica success aos campos válidos e error aos campos inválidos. Use variáveis CSS para personalizar esses estados sem alterar a biblioteca. 

:root {
    --validation-success: #0d6b63;
    --validation-error: #ff815d;
}

input.success {
    border-color: var(--validation-success);
}

input.error {
    border-color: var(--validation-error);
}

Em layouts Bootstrap ou semelhantes, o ancestral .form-group também recebe has-error quando o campo é inválido.

14 / referência

API pública

A função InnerFormValidation também é o seletor nativo da biblioteca: use InnerForm(selector) para obter uma coleção encadeável. Todos os métodos públicos ficam diretamente nela. Se jQuery existir, jQuery.innerForm aponta para a mesma API e os plugins legados são conectados ao jQuery.fn.

validateCPFCPF brasileiro
validateCNPJCNPJ brasileiro
validateCNHCNH brasileira
validateEmail · validateURL · validatePix · validatePhoneformatos
validateUF · validateOAB · validateUUID · validateCEPidentificadores
validDate · validDateRange · validMonthYearRangedatas e períodos
validateTime · expandYear · getAgetempo e idade
checkLuhn · validateCardBrandcartões
applyCPFMask · applyCNPJMask · applyCEPMask · applyNumberMaskmáscaras DOM
searchViaCEP · getLocation · watchLocationintegrações
isValid · startMasks · startValidationformulários
draft · undraft · isDraftmodo rascunho