Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
530 lines (521 loc) · 36.8 KB
/
Copy pathindex.html
File metadata and controls
530 lines (521 loc) · 36.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description"
content="Documentação completa do InnerFormValidation: validações brasileiras, máscaras, callbacks, ViaCEP, geolocalização e API JavaScript sem dependências.">
<meta name="keywords"
content="InnerFormValidation, JavaScript, CPF, CNPJ, CNH, OAB, PIX, CEP, ViaCEP, geolocalização, máscara, validação">
<meta property="og:title" content="InnerFormValidation | Laboratório e documentação">
<meta property="og:description" content="Teste todas as validações, máscaras e integrações do InnerForm.">
<meta property="og:type" content="website">
<link rel="canonical" href="https://zonaro.github.io/InnerFormValidation/">
<link rel="stylesheet" href="styles.css">
<title>InnerFormValidation | Documentação completa</title>
<script
type="application/ld+json">{"@context":"https://schema.org","@type":"TechArticle","headline":"InnerFormValidation: documentação completa","description":"API JavaScript independente de jQuery para validação, máscaras, ViaCEP e geolocalização.","url":"https://zonaro.github.io/InnerFormValidation/","programmingLanguage":"JavaScript","license":"https://opensource.org/licenses/MIT"}</script>
</head>
<body>
<header class="topbar"><a class="brand" href="#inicio">🦞InnerFormValidation</a>
<nav aria-label="Navegação"><a href="#inicio">Início</a><a href="#laboratorio">Laboratório</a><a
href="#cep">Integrações</a><a href="#api">API</a></nav><select id="language" aria-label="Idioma">
<option value="pt">PT-BR</option>
<option value="en">EN</option>
<option value="es">ES</option>
</select>
</header>
<main>
<section id="inicio" class="hero wrap">
<div>
<p class="eyebrow">JavaScript toolkit · documentação completa</p>
<h1>Valide cada detalhe do seu formulário.</h1>
<p class="lede">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 <code>$</code>.</p>
<p class="chips">
<code>CDN jsDelivr</code><code>zero dependencies</code><code>callable API</code><code>pt · en · es</code>
</p>
</div>
<aside class="hero-note"><strong>InnerFormValidation</strong>
<p>Validação declarativa, máscaras e integrações para formulários reais.</p><a class="button primary"
href="#laboratorio">Abrir laboratório</a>
</aside>
</section>
<section id="cdn" class="cdn-strip wrap">
<div>
<p class="eyebrow">Primeiro passo</p>
<h2>Integre pelo CDN jsDelivr</h2>
<p>O caminho recomendado para começar. Não exige jQuery.</p>
</div>
<pre><code><script src="https://cdn.jsdelivr.net/gh/zonaro/InnerFormValidation@master/InnerFormValidation.js"></script>
InnerForm.isValid(form)
InnerForm.validateCPF(value)</code></pre>
</section>
<div class="layout wrap">
<aside class="toc"><strong>Conteúdo</strong><a href="#configuracao">00 Configuração</a><a href="#basicas">01
Básicas</a><a href="#strings">02
Caracteres</a><a href="#tamanho">03 Comprimento</a><a href="#documentos">04 Documentos</a><a
href="#datas">05 Data e hora</a><a href="#comparacoes">06 Idade e comparação</a><a href="#senha">07
Senhas</a><a href="#cartoes">08 Cartões</a><a href="#conteudo">09 Conteúdo</a><a href="#midia">10
Resolução e proporção</a><a href="#cep">11
Autocomplete de CEP</a><a href="#geolocation">12 Geolocalização</a><a href="#callbacks">13 Callbacks
declarativos</a><a href="#css-variaveis">14 CSS por variáveis</a><a href="#api">15 API</a>
</aside>
<div class="content">
<section id="configuracao" class="section configuration">
<p class="eyebrow">00 / comece aqui</p>
<h2>Configure o plugin de verdade</h2>
<p class="intro">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.</p>
<div class="columns">
<article class="panel">
<h3>Ativação automática</h3>
<p>Um formulário é ativado se tiver <code>validate</code>,
<code>data-validate="true"</code>, <code>data-validation="true"</code> ou
<code>forcevalidate</code>. Campos sem uma dessas regras continuam disponíveis pela API,
mas não recebem eventos automaticamente.
</p>
<pre><code><form class="validate">
<input class="obg email" type="email">
<button type="submit">Enviar</button>
</form>
<script src="InnerFormValidation.js"></script></code></pre>
<p class="hint">No envio, o plugin marca os campos como visitados e valida o formulário
inteiro.</p>
</article>
<article class="panel">
<h3>Ativação manual</h3>
<p>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.</p>
<pre><code>InnerForm.startMasks('#checkout');
InnerForm.startValidation('#checkout');
InnerForm.isValid('#email');
InnerForm('#codigo').isValid('regex');</code></pre>
<p class="hint">As funções retornam a coleção encadeável, exceto <code>isValid</code>, que
retorna booleano.</p>
</article>
</div>
<div class="configuration-grid">
<article class="panel">
<h3>Quando validar</h3>
<p>Para validar automaticamente enquanto o usuário digita, adicione <code>onkeyup</code> ao
campo. O plugin aguarda <code>InnerForm.onTypeTimeout</code> após a última tecla antes
de
executar as regras e atualizar <code>success</code> ou <code>error</code>.</p>
<table class="config-table">
<tbody>
<tr>
<th><code>onkeyup</code></th>
<td>valida enquanto digita, após <code>InnerForm.onTypeTimeout</code> (900 ms
por padrão)</td>
</tr>
<tr>
<th><code>notonblur</code></th>
<td>desliga a validação ao perder o foco</td>
</tr>
<tr>
<th><code>notonchange</code></th>
<td>desliga a validação no evento <code>change</code></td>
</tr>
<tr>
<th><code>InnerForm.verbose = true</code></th>
<td>habilita logs de diagnóstico no console</td>
</tr>
</tbody>
</table>
<pre><code><input class="obg email onkeyup">
InnerForm.onTypeTimeout = 1200;</code></pre>
<p class="hint">O evento é configurado automaticamente quando o formulário usa
<code>validate</code>, <code>data-validate="true"</code>,
<code>data-validation="true"</code>
ou <code>forcevalidate</code>. <code>notonblur</code> e <code>notonchange</code>
desativam
apenas esses eventos, não o <code>onkeyup</code>.
</p>
</article>
<article class="panel">
<h3>Classes que controlam a aparência</h3>
<p>Ao validar um campo preenchido, o plugin alterna automaticamente <code>success</code> e
<code>error</code>. Em layouts Bootstrap ou semelhantes, o ancestral
<code>.form-group</code> também recebe <code>has-error</code> quando inválido.
</p>
<pre><code>input.success { border-color: #198754; }
input.error { border-color: #dc3545; }
.form-group.has-error .help { color: #dc3545; }</code></pre>
<p class="hint">O campo vazio e opcional permanece sem <code>success</code>. Prefira CSS
próprio para manter a aparência consistente com seu design system.</p>
</article>
<article class="panel">
<h3>Modo rascunho</h3>
<p>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.</p>
<form class="validate demo-form" data-draft data-demo-form>
<label>E-mail obrigatório<input class="obg email"
placeholder="nome@dominio.com"></label>
<button class="button primary" type="submit">Salvar rascunho</button>
<output></output>
</form>
<pre><code><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</code></pre>
<p class="hint">Também funciona com a classe <code>draft</code> no formulário.
<code>data-draft="false"</code> desativa explicitamente o modo.</p>
</article>
</div>
<article class="panel data-panel">
<h3>Atributos <code>data-*</code> para personalizar a experiência</h3>
<div class="data-table">
<div><code>data-invalidmessage</code><span>Mensagem usada em
<code>setCustomValidity()</code>, exibida pela validação nativa do navegador.</span>
</div>
<div><code>data-regex-flags</code><span>Flags da regra <code>regex</code>, como
<code>i</code> ou <code>g</code>.</span></div>
<div><code>data-separator</code> · <code>data-decimal</code> ·
<code>data-thousand</code><span>Configuram separador decimal, casas decimais e separador
de milhares em números e dinheiro.</span>
</div>
<div><code>data-addressnotfoundtext</code> · <code>data-notfoundtext</code><span>Texto
exibido quando a consulta ViaCEP não encontra o endereço.</span></div>
<div><code>data-addressnotfound</code> · <code>data-notfound</code><span>Expressão executada
quando o CEP não é encontrado; use para atualizar sua UI.</span></div>
</div>
<pre><code><input class="mask decimal" data-separator="," data-decimal="2" data-thousand=".">
<input class="cep" data-addressnotfoundtext="Confira o CEP informado."></code></pre>
</article>
</section>
<section id="laboratorio" class="section">
<p class="eyebrow">Laboratório interativo</p>
<h2>Todas as regras, em um lugar</h2>
<p class="intro">Digite nos campos. A biblioteca aplica a máscara e valida as classes em tempo real.
O botão testa o formulário inteiro.</p>
<section id="basicas" class="demo-block">
<header><span>01</span>
<div>
<h3>Validações básicas</h3>
<p><code>obg</code> · <code>email</code> · <code>url</code> · <code>regex</code></p>
</div>
</header>
<form class="validate demo-grid" data-demo-form><label>Obrigatório<input class="obg"
placeholder="Campo obrigatório"></label><label>E-mail<input class="email"
placeholder="nome@dominio.com"></label><label>URL<input class="url"
placeholder="https://exemplo.com"></label><label>Regex com pattern<input
class="regex" pattern="^[A-Z]{3}-[0-9]{3}$" placeholder="ABC-123"></label><button
class="button primary" type="submit">Validar bloco</button><output></output></form>
</section>
<section id="strings" class="demo-block">
<header><span>02</span>
<div>
<h3>Caracteres e texto</h3>
<p><code>alpha</code> · <code>alphanum</code> · <code>num</code> · <code>upper</code> ·
<code>lower</code> · <code>nospace</code>
</p>
</div>
</header>
<form class="validate demo-grid compact" data-demo-form><label>Apenas letras<input
class="mask alpha"></label><label>Alfanumérico<input
class="mask alphanum"></label><label>Número<input
class="mask num"></label><label>Maiúsculas<input
class="mask upper"></label><label>Minúsculas<input
class="mask lower"></label><label>Sem espaços<input
class="mask nospace"></label><button class="button primary" type="submit">Validar
bloco</button><output></output></form>
</section>
<section id="tamanho" class="demo-block">
<header><span>03</span>
<div>
<h3>Comprimento e números</h3>
<p><code>len 8</code> · <code>minlen 4</code> · <code>maxlen 12</code> · separadores
personalizados</p>
</div>
</header>
<form class="validate demo-grid" data-demo-form><label>Exatamente 8<input
class="len 8"></label><label>Mínimo 4<input class="minlen 4"></label><label>Máximo
12<input class="maxlen 12"></label><label>Inteiro com milhar<input class="mask integer"
data-thousand="."></label><label>Decimal BR<input class="mask decimal"
data-separator="," data-decimal="2" data-thousand="."></label><label>Zeros à
esquerda<input class="mask num leadingzero 8" placeholder="00000000"></label><button
class="button primary" type="submit">Validar bloco</button><output></output></form>
</section>
<section id="documentos" class="demo-block">
<header><span>04</span>
<div>
<h3>Documentos, localização e identificadores</h3>
<p>Máscara e validação para CPF, CNPJ, CNH, CEP, OAB, UF, UUID, PIX e coordenadas.</p>
</div>
</header>
<form class="validate demo-grid compact" data-demo-form><label>CPF<input
class="mask cpf"></label><label>CNPJ<input class="mask cnpj"></label><label>CPF ou
CNPJ<input class="mask cpfcnpj"></label><label>CNH<input
class="mask cnh"></label><label>CEP<input class="mask cep"></label><label>OAB<input
class="mask oab" placeholder="511061SP"></label><label>UF / state<input
class="mask uf"></label><label>UUID / GUID<input
class="mask uuid"></label><label>PIX / chavepix<input
class="pix"></label><label>Latitude<input
class="mask latitude precision 6"></label><label>Longitude<input
class="mask longitude precision 6"></label><label>Coordenadas<input
class="coordinate" placeholder="-23.55,-46.63"></label><button
class="button primary" type="submit">Validar documentos</button><output></output></form>
</section>
<section id="datas" class="demo-block">
<header><span>05</span>
<div>
<h3>Data, hora e períodos</h3>
<p><code>date</code> · <code>time</code> · <code>datetime</code> ·
<code>monthyear</code> · ranges
</p>
</div>
</header>
<form class="validate demo-grid compact" data-demo-form><label>Data<input
class="mask date"></label><label>Data e hora<input
class="mask datetime"></label><label>Hora<input
class="mask time"></label><label>Hora curta<input
class="mask shorttime"></label><label>Minutos e segundos<input
class="mask minutesecond"></label><label>Mês e ano<input
class="mask monthyear"></label><label>Período de datas<input class="mask daterange"
placeholder="01/01/2024 ~ 31/12/2024"></label><label>Período mês/ano<input
class="mask monthyearrange"></label><label>Período curto<input
class="mask shortmonthyearrange"></label><button class="button primary"
type="submit">Validar datas</button><output></output></form>
</section>
<section id="comparacoes" class="demo-block">
<header><span>06</span>
<div>
<h3>Idade e comparação</h3>
<p><code>minage</code> · <code>maxage</code> · <code>age</code> · <code>after</code> ·
<code>before</code> · <code>to</code>
</p>
</div>
</header>
<form class="validate demo-grid" data-demo-form><label>Maior de 18<input
class="mask date minage 18" placeholder="Data de nascimento"></label><label>Menor de
65<input class="mask date maxage 65"></label><label>Exatamente 30<input
class="mask date age 30"></label><label>Maior que 10<input
class="num after 10"></label><label>Menor que 100<input
class="num before 100"></label><label>Entre 1 e 10<input
class="num 1 to 10"></label><label>Após hoje<input
class="mask date after today"></label><label>Antes de uma data<input
class="mask date before 31/12/2030"></label><button class="button primary"
type="submit">Validar comparações</button><output></output></form>
</section>
<section id="senha" class="demo-block">
<header><span>07</span>
<div>
<h3>Força de senha</h3>
<p><code>password strong</code> · <code>medium</code> · <code>weak</code> e atributo
<code>data-pwstrength</code>
</p>
</div>
</header>
<form class="validate demo-grid" data-demo-form><label>Forte<input type="password"
class="password strong minlen 8"><small class="password-strength">4 critérios:
maiúscula, minúscula, número e símbolo</small></label><label>Média<input
type="password" class="password medium minlen 6"><small class="password-strength">3
critérios</small></label><label>Customizada<input type="password"
class="password 2 minlen 4"><small class="password-strength">2
critérios</small></label><button class="button primary" type="submit">Validar
senhas</button><output></output></form>
</section>
<section id="cartoes" class="demo-block">
<header><span>08</span>
<div>
<h3>Cartões de crédito</h3>
<p>Luhn e bandeiras: Visa, Mastercard, Amex, Elo, Hiper, Diners, Discover, JCB, Aura e
outras.</p>
</div>
</header>
<form class="validate demo-grid" data-demo-form><label>Qualquer bandeira<input
class="mask creditcard" placeholder="4111 1111 1111 1111"></label><label>Somente
Visa<input class="mask creditcard visa"></label><label>Mastercard<input
class="mask creditcard mastercard"></label><button class="button primary"
type="submit">Validar cartões</button><output></output></form>
</section>
<section id="conteudo" class="demo-block">
<header><span>09</span>
<div>
<h3>Conteúdo e igualdade</h3>
<p><code>contains</code> · <code>containsanychar</code> · <code>containsallchar</code> ·
<code>notchar</code> · <code>eq</code> · <code>eqv</code>
</p>
</div>
</header>
<form class="validate demo-grid" data-demo-form><label>Contém texto<input
class="contains @empresa.com"
placeholder="Inclua @empresa.com"></label><label>Contém qualquer<input
class="containsanychar {}()" placeholder="Qualquer: {}()"></label><label>Contém
todos<input class="containsallchar ABC" placeholder="Todos: A, B e C"></label><label>Não
contém<input class="notcontainschar ABC"></label><label>Senha<input id="demo-password"
type="password"></label><label>Igual ao campo<input
class="eq #demo-password"></label><label>Valor admin<input
class="eqv admin"></label><button class="button primary" type="submit">Validar
conteúdo</button><output></output></form>
</section>
<section id="midia" class="demo-block">
<header><span>10</span>
<div>
<h3>Resolução e proporção</h3>
<p><code>resolution</code> · <code>aspectratio</code> · auxiliares
<code>landscape</code> · <code>portrait</code>
</p>
</div>
</header>
<form class="validate demo-grid" data-demo-form><label>Resolução<input
class="mask resolution" placeholder="1024x768"></label><label>Resolução
landscape<input class="mask resolution landscape"
placeholder="1920x1080"></label><label>Resolução portrait<input
class="mask resolution portrait" placeholder="768x1024"></label><label>Aspect
ratio<input class="mask aspectratio" placeholder="16:9"></label><label>Aspect
landscape<input class="mask aspectratio landscape" placeholder="21:9"></label><label>Aspect
portrait<input class="mask aspectratio portrait" placeholder="9:16"></label><button
class="button primary" type="submit">Validar mídia</button><output></output></form>
<p class="hint">Sem limite de dígitos em nenhum dos lados do <code>x</code> ou do
<code>:</code>. Com <code>landscape</code>, a largura precisa ser maior que a altura; com
<code>portrait</code>, a altura precisa ser maior que a largura (quadrado é inválido nos
dois casos).</p>
</section>
</section>
<section id="cep" class="section integrations">
<p class="eyebrow">11 / browser APIs</p>
<h2>Autocomplete de CEP</h2>
<article>
<p>O CEP é o primeiro campo. A busca ViaCEP preenche endereço, complemento, bairro, cidade,
UF, IBGE, GIA, DDD, SIAFI e endereço completo.</p>
<h3>Classes de autocomplete</h3>
<p>Use <code>autocomplete cep mask</code> no campo do CEP para iniciar a busca no evento
<code>input</code>. Nos campos de destino, mantenha <code>autocomplete</code> junto da
classe
correspondente: <code>address</code>, <code>complement</code>, <code>neighborhood</code>,
<code>city</code>, <code>state</code>, <code>ibge</code>, <code>gia</code>,
<code>ddd</code>,
<code>siafi</code>, <code>citystate</code> ou <code>fulladdress</code>.
</p>
<form id="cep-form" class="address-form"><label>CEP<input id="cep-input"
class="autocomplete mask cep" placeholder="01001-000"></label><label>Número<input
class="autocomplete homenum"></label><label>Logradouro<input
class="autocomplete address" readonly></label><label>Complemento<input
class="autocomplete complement" readonly></label><label>Bairro<input
class="autocomplete neighborhood" readonly></label><label>Cidade<input
class="autocomplete city" readonly></label><label>UF<input
class="autocomplete state" readonly></label><label>IBGE<input
class="autocomplete ibge" readonly></label><label>DDD<input class="autocomplete ddd"
readonly></label><output id="cep-status"></output><button type="button"
id="cep-button" class="button light">Buscar na ViaCEP</button></form>
<pre><code>InnerForm.searchViaCEP(cep, numero, 0, callback)</code></pre>
<p class="hint">O campo de número pode usar <code>homenum</code>, <code>homenumber</code>,
<code>number</code> ou <code>num</code>. Campos que não sejam inputs também podem receber os
dados como texto.
</p>
</article>
</section>
<section id="geolocation" class="section integrations">
<p class="eyebrow">12 / browser APIs</p>
<h2>Geolocalização</h2>
<article>
<p>Use HTTPS e permissão do navegador. <code>getLocation</code> retorna coordenadas,
precisão, altitude, horário e links de mapa; <code>watchLocation</code> acompanha
mudanças.</p>
<div class="geo-actions"><button id="geo-get" class="button light">Obter
localização</button><button id="geo-watch" class="button outline">Iniciar
monitoramento</button><button id="geo-stop" class="button outline">Parar
monitoramento</button></div><output id="geo-status" role="status">Aguardando
ação.</output>
<dl id="geo-result" class="geo-result"></dl>
<pre><code>InnerForm.getLocation(options)
InnerForm.watchLocation(onSuccess, onError, options)
InnerForm.clearLocationWatch(watchId)</code></pre>
</article>
</section>
<section id="callbacks" class="section">
<p class="eyebrow">13 / extensibilidade</p>
<h2>Callbacks declarativos</h2>
<div class="columns">
<article class="panel">
<h3>Callbacks declarativos</h3>
<p>Os atributos <code>data-beforevalidatecallback</code>, <code>data-validcallback</code>,
<code>data-invalidcallback</code>, <code>data-aftervalidatecallback</code> e
<code>data-invalidmessage</code> conectam sua UI ao ciclo de validação.
</p><input id="callback-demo" class="obg"
data-validcallback="document.querySelector('#callback-status').textContent='Campo válido'"
data-invalidcallback="document.querySelector('#callback-status').textContent='Campo inválido'"
placeholder="Deixe vazio e depois preencha"><button id="callback-button"
class="button primary">Executar callback</button><output id="callback-status"></output>
</article>
</div>
</section>
<section id="css-variaveis" class="section">
<p class="eyebrow">14 / personalização</p>
<h2>CSS por variáveis</h2>
<div class="columns">
<article class="panel">
<p>O plugin aplica <code>success</code> aos campos válidos e <code>error</code> aos campos
inválidos. Use variáveis CSS para personalizar esses estados sem alterar a biblioteca.
</p>
<pre><code>:root {
--validation-success: #0d6b63;
--validation-error: #ff815d;
}
input.success {
border-color: var(--validation-success);
}
input.error {
border-color: var(--validation-error);
}</code></pre>
<p class="hint">Em layouts Bootstrap ou semelhantes, o ancestral <code>.form-group</code>
também recebe <code>has-error</code> quando o campo é inválido.</p>
</article>
</div>
</section>
<section id="api" class="section api">
<p class="eyebrow">15 / referência</p>
<h2>API pública</h2>
<p class="intro">A função <code>InnerFormValidation</code> também é o seletor nativo da biblioteca:
use <code>InnerForm(selector)</code> para obter uma coleção encadeável. Todos os
métodos
públicos ficam diretamente nela. Se jQuery existir, <code>jQuery.innerForm</code> aponta para a
mesma API e os plugins legados são conectados ao <code>jQuery.fn</code>.</p>
<div class="api-list">
<div><code>validateCPF</code><span>CPF brasileiro</span></div>
<div><code>validateCNPJ</code><span>CNPJ brasileiro</span></div>
<div><code>validateCNH</code><span>CNH brasileira</span></div>
<div><code>validateEmail · validateURL · validatePix · validatePhone</code><span>formatos</span>
</div>
<div>
<code>validateUF · validateOAB · validateUUID · validateCEP</code><span>identificadores</span>
</div>
<div><code>validDate · validDateRange · validMonthYearRange</code><span>datas e períodos</span>
</div>
<div><code>validateResolution · validateAspectRatio</code><span>resolução e proporção (com
<code>landscape</code> / <code>portrait</code>)</span></div>
<div><code>validateTime · expandYear · getAge</code><span>tempo e idade</span></div>
<div><code>checkLuhn · validateCardBrand</code><span>cartões</span></div>
<div><code>applyCPFMask · applyCNPJMask · applyCEPMask · applyNumberMask</code><span>máscaras
DOM</span></div>
<div><code>applyResolutionMask · applyAspectRatioMask</code><span>máscaras de mídia</span>
</div>
<div><code>searchViaCEP · getLocation · watchLocation</code><span>integrações</span></div>
<div><code>isValid · startMasks · startValidation</code><span>formulários</span></div>
<div><code>draft · undraft · isDraft</code><span>modo rascunho</span></div>
</div>
</section>
</div>
</div>
</main>
<footer class="wrap footer"><b>InnerFormValidation</b><span>MIT · documentação humana e AI-friendly</span><a
href="https://github.com/InnerFormValidation/InnerFormValidation">README</a></footer>
<div id="field-menu" class="field-menu" hidden role="menu"><button type="button" data-field-action="classes"
role="menuitem">Copiar classes CSS de validação</button><button type="button" data-field-action="html"
role="menuitem">Copiar HTML</button></div>
<script src="InnerFormValidation.js"></script>
<script>
InnerForm.verbose = true; // habilita logs de diagnóstico no console
</script>
<script src="docs.js"></script>
</body>
</html>