Durante a implementação de páginas web para que sejam exibidas ao usuário, denominado lado cliente ou modo visão, é preciso criar regras para que os formulários não se tornem vulneráveis, quebrando toda a rotina e tratando de uma forma totalmente fora do contexto na questão de tipos, transições e armazenamento de dados.
Nesse artigo serão vistos exemplos diversos em que a página HTML sofrerá mudanças de acordo com cada comportamento de campo a ser validado em relação ao formulário. Veremos dois exemplos utilizando JavaScript, jQuery e CSS: um com as mensagens de erros no topo da página e o outro mais elaborado com mensagens nos campos obrigatórios.
Exibindo Mensagens no Topo do Formulário
Vamos criar um formulário contendo campos básicos para simular um cadastro de clientes com os elementos HTML text, radiobuttons e checkbox, todos a serem validados via JavaScript e jQuery, exibindo para o usuário uma mensagem no topo do formulário caso exista erro no seu preenchimento.
Para isso, será criada uma pasta com o nome ValidaçãoJQueryTopo e dentro desta será criada uma pasta _js, onde serão criados os arquivos nos formatos .js (JavaScript). O primeiro a ser criado pode ser feito no notepad ou em qualquer editor de texto. Este terá o nome funções.js e será implementado de acordo com a Listagem 1.
var reDigits = /^\d+$/;
function numInteiro(pStr)
{
if (reDigits.test(pStr))
{
return true;
}
else
if (pStr != null && pStr != "")
{
return false;
}
}
var reDecimalPt = /^[+-]?((\d+|\d{1,3}(\.\d{3})+)(\,\d*)?|\,\d+)$/;
var reDecimalEn = /^[+-]?((\d+|\d{1,3}(\,\d{3})+)(\.\d*)?|\.\d+)$/;
var reDecimal = reDecimalPt;
function numReal(pStr)
{
charDec = ",";
if (reDecimal.test(pStr))
{
pos = pStr.indexOf(charDec);
decs = pos == -1? 0: pStr.length - pos - 1;
return true;
}
else
if (pStr != null && pStr != "")
{
return false;
}
}
function validaCPF(cpf)
{
cpf = cpf.replace('.','');
cpf = cpf.replace('.','');
cpf = cpf.replace('-','');
erro = new String;
if (cpf.length < 11) erro += "Sao necessarios 11 digitos para
verificacao do CPF! \n\n";
var nonNumbers = /\D/;
if (nonNumbers.test(cpf)) erro += "A verificacao de CPF suporta
apenas numeros! \n\n";
if (cpf == "00000000000" || cpf == "11111111111" ||
cpf == "22222222222" || cpf == "33333333333" || cpf == "44444444444" ||
cpf == "55555555555" || cpf == "66666666666" || cpf == "77777777777" ||
cpf == "88888888888" || cpf == "99999999999"){
erro += "Numero de CPF invalido!"
}
var a = [];
var b = new Number;
var c = 11;
for (i=0; i<11; i++){
a[i] = cpf.charAt(i);
if (i < 9) b += (a[i] * --c);
}
if ((x = b % 11) < 2) { a[9] = 0 } else { a[9] = 11-x }
b = 0;
c = 11;
for (y=0; y<10; y++) b += (a[y] * c--);
if ((x = b % 11) < 2) { a[10] = 0; } else { a[10] = 11-x; }
status = a[9] + ""+ a[10]
if ((cpf.charAt(9) != a[9]) || (cpf.charAt(10) != a[10])){
erro +="Digito verificador com problema!";
}
if (erro.length > 0){
return false;
}
return true;
}
function verificaData(Data)
{
Data = Data.substring(0,10);
var dma = -1;
var data = Array(3);
var ch = Data.charAt(0);
for(i=0; i < Data.length && (( ch >= '0' &&
ch <= '9' ) || ( ch == '/' && i != 0 ) ); ){
data[++dma] = '';
if(ch!='/' && i != 0) return false;
if(i != 0 ) ch = Data.charAt(++i);
if(ch=='0') ch = Data.charAt(++i);
while( ch >= '0' && ch <= '9' ){
data[dma] += ch;
ch = Data.charAt(++i);
}
}
if(ch!='') return false;
if(data[0] == '' || isNaN(data[0]) || parseInt(data[0]) < 1) return false;
if(data[1] == '' || isNaN(data[1]) || parseInt(data[1]) < 1 ||
parseInt(data[1]) > 12) return false;
if(data[2] == '' || isNaN(data[2]) || ((parseInt(data[2]) < 0 ||
parseInt(data[2]) > 99 ) && (parseInt(data[2]) <
1900 || parseInt(data[2]) > 9999))) return false;
if(data[2] < 50) data[2] = parseInt(data[2]) + 2000;
else if(data[2] < 100) data[2] = parseInt(data[2]) + 1900;
switch(parseInt(data[1])){
case 2: { if(((parseInt(data[2])%4!=0 ||
(parseInt(data[2])%100==0 && parseInt(data[2])%400!=0))
&& parseInt(data[0]) > 28) || parseInt(data[0]) >
29 ) return false; break; }
case 4: case 6: case 9: case 11: { if(parseInt(data[0]) >
30) return false; break;}
default: { if(parseInt(data[0]) > 31) return false;}
}
return true;
}A variável reDigits que recebe uma expressão regular relativa a números decimais.
Em seguida existe a função numInteiro, que é responsável por validar se um número é inteiro ou não, retornando verdadeiro se o número é inteiro ou falso se o número não for inteiro.
Logo em seguida existem três variáveis:
- reDecimalPt, que recebe a máscara do campo padrão de números reais do formato português;
- reDecimalEn, que recebe a máscara do campo padrão de números reais do formato inglês, e;
- reDecimal, que recebe o padrão a ser utilizado para verificação de números reais no formato português (reDecimalPt).
Em seguida existe a função numReal que é responsável por verificar se um número informado é real, retornando verdadeiro ou se não for, retorna falso.
Logo abaixo existe a função validaCPF, responsável por inicialmente substituir a máscara (que contem traços e pontos) por valores nulos, além de verificar se o CPF informado é válido de acordo com os padrões próprios de validações e, por fim, faz a verificação da quantidade de dígitos informados se está no tamanho válido (que são de 11 caracteres), retornando verdadeiro se o número informado é correto ou falso se for incorreto.
Além disso temos a função verificaData é responsável por inicialmente verificar se a quantidade de caracteres informada está no tamanho correto, retirar a máscara colocada durante o carregamento do formulário, verificar se o dia, mês e ano estão corretos e formato dd/mm/aaaa, retornando verdadeiro se a data informada é válida ou falso se for inválida.
Em seguida, dentro da pasta ValidaçãoJQueryTopo será criado um arquivo com o nome jquery_form1 no formato .html. Acrescente a ele o código descrito na Listagem 2.
<!DOCTYPE html>
<head>
<title>Validando Formulários com jQuery - 1 </title>
<script language="javascript" src="_js/jquery-1.6.1.min.js"></script>
<script language="javascript" src="_js/funcoes.js"></script>
<script language="javascript" src="_js/jquery.maskedinput-1.1.4.pack.js">
</script>
<script language="javascript">
$(document).ready(function(){
$("#cpf").mask("999.999.999-99");
$("#data_nasc").mask("99/99/9999");
$("#formcad").submit(validar);
});
function validar()
{
var msg="";
$("[obrigatorio=sim]").each(function(){
if( $(this).attr("type") == "radio" )
{
if( $("input[name="+$(this).attr("name")+"]:checked").length == 0 )
{
msg += "<li>O campo " + $(this).attr("rotulo")
+ " é obrigatório</li>";
}
}
else
if( $(this).attr("type") == "checkbox" )
{
if( $("input[grupock="+$(this).attr("grupock")+"]:checked").length <
$(this).attr("qde_min") )
{
msg += "<li>Pelo menos "+$(this).attr("qde_min")
+" opção(ões) do campo(s) " + $(this).attr("rotulo")
+ " deve(m) ser marcado(s)!</li>";
}
}
else
if( $(this).val() == '' )
{
msg += '<li>O campo '+ $(this).attr("rotulo")+' é
obrigatório !</li>';
}
else
if( $(this).attr("tipo_dado") == "cpf" &&
!validaCPF($(this).val()) )
{
msg += '<li>O campo '+ $(this).attr("rotulo")+'
deve ser válido !</li>';
}
else
if( $(this).attr("tipo_dado") == "data" &&
!verificaData($(this).val()) )
{
msg += '<li>O campo '+ $(this).attr("rotulo")+'
deve ser uma data válida !</li>';
}
else
if( $(this).attr("tipo_dado") == "inteiro" &&
!numInteiro($(this).val()) )
{
msg += '<li>O campo '+ $(this).attr("rotulo")+'
deve ser um numero inteiro válido !</li>';
}
else
if( $(this).attr("tipo_dado") == "real" &&
!numReal($(this).val()) )
{
msg += '<li>O campo '+ $(this).attr("rotulo")+'
deve ser um numero real válido !</li>';
}
});
if(msg=='')
{
return true;
}
else
{
msg = '<ul>' + msg + '</ul>';
$("#divError").html(msg).css("color", "red").fadeIn(300);
return false;
}
}
</script>
<style>
p{
margin: 2px;
padding: 2px;
}
</style>
</head>
<body>
<h3>Validando Formulários com jQuery - 1 </h3>
<form method="post" id="formcad" action="">
<div id="divError" style="display:none"></div>
<p>Nome</p>
<input type="text" name="nome" id="nome" obrigatorio="sim"
rotulo="nome do cliente" size="60" maxlength="100"/>
<p>Sexo</p>
<input type="radio" name="sexo" id="sexoM" value="M"
rotulo="sexo" obrigatorio="sim">Masculino<br>
<input type="radio" name="sexo" id="sexoF" value="F"
>Feminino<br>
<p>CPF:</p>
<input type="text" name="cpf" id="cpf" obrigatorio="sim"
rotulo="CPF" tipo_dado="cpf" size="25" maxlength="14"/>
<p>Propriedades:</p>
<input type="checkbox" name="tem_carro" id="tem_carro"
value="S" obrigatorio="sim" rotulo="propriedades"
grupock="propriedade" qde_min="1">Carro<br>
<input type="checkbox" name="tem_moto" id="tem_moto"
value="S" grupock="propriedade">Moto<br>
<input type="checkbox" name="tem_imovel" id="tem_imovel"
value="S" grupock="propriedade">Imóvel<br>
<p>Data de nascimento:</p>
<input type="text" name="data_nasc" id="data_nasc"
obrigatorio="sim" rotulo="Data de nascimento" tipo_dado="data" />
<p>Número de filhos:</p>
<input type="text" name="filhos" id="filhos"
obrigatorio="sim" rotulo="número de filhos"
tipo_dado="inteiro" />
<p>Salário:</p>
<input type="text" name="salario"
id="salario" obrigatorio="sim" rotulo="salário"
tipo_dado="real" />
<p> </p>
<input type="submit" value="Enviar" />
</form>
</body>
</html>Dentro do comando script language="javascript" src são feitas as importações dos arquivos da pasta _js a serem utilizados na página HTML.
A função jQuery $(document).ready(function() é responsável por afirmar que a página está pronta para ser executada com o que está dentro da função. Nela contém comandos para colocar máscara no CPF e na Data de Nascimento para o formulário.
Repare que a função validar é responsável por fazer as validações via jQuery. Nela é declarada uma variável com o nome de msg que inicialmente recebe vazio e tem finalidade ir incrementando nela uma mensagem de erro.
Em seguida é declarada uma função jQuery $("[obrigatorio=sim]").each(function(){ que é responsável por obter todo o atributo obrigatório que está declarado em cada campo e, se for sim, o campo entra nessa função para ser validado.
Dentro dessa função existem condições responsáveis por armazenar o tipo de campo:
- Se o tipo for radio, é informada a condição $(this).attr("type") == "radio" e dentro dela verifica se a quantidade de indexes clicados: se for igual a 0 é incrementada uma mensagem para a variável msg dizendo que o campo radio com o campo Sexo é obrigatório.
- Se o tipo de campo for checkbox, é informada a condição $(this).attr("type") == "checkbox" e dentro dela verifica se a quantidade de itens selecionados: se for menor que a quantidade mínima (informado no campo pelo atributo: qde_min), que no caso é 1, então é incrementada na variável msg dizendo que pelo menos 1 opção do campo Propriedades precisa ser informado.
- Se o tipo de campo for text e não houver máscara ou atributo no campo, é informada a condição $(this).val() == '', que verifica se houve dados informados no campo; se não houver, é incrementada na variável msg dizendo que o campo é obrigatório. Essa validação é referente ao campo Nome.
- Em seguida existem a condição $(this).attr("tipo_dado") == "cpf" && !validaCPF($(this).val()), que verifica se o tipo_dado é cpf (referente ao campo CPF) e se o valor informado está correto de acordo com a função validaCPF, se esse campo estiver com dados incorretos é incrementada na variável msg dizendo que o CPF precisa ser válido.
- A condição $(this).attr("tipo_dado") == "data" && !verificaData($(this).val()) verifica se o tipo_dado é data (referente ao campo Data de Nascimento). Se o valor informado estiver incorreto, de acordo com a função verificaData, é incrementada na variável msg dizendo que a Data de Nascimento precisa ser válida.
- A condição $(this).attr("tipo_dado") == "inteiro" && !numInteiro($(this).val()) verifica se o tipo_dado é inteiro (referente ao campo Número de Filhos) e se o valor informado está num formato correto de acordo com a função numInteiro. Se esse campo estiver com dados incorretos, é incrementada na variável msg dizendo que o campo Número de Filhos precisa ser válido.
- E por fim a condição $(this).attr("tipo_dado") == "real" && !numReal($(this).val()) verifica se o tipo_dado é real (referente ao campo Salário) e se o valor informado está num formato correto de acordo com a função numReal. Se esse campo estiver com dados incorretos é incrementada na variável msg dizendo que o campo Salário precisa ser válido.
Abaixo existe uma condição afirmando que se a variável msg estiver vazia, então é porque não houve erros no preenchimento e é retornado para dar continuidade ao formulário. Se existir ao menos uma mensagem de erro, é incrementada dentro de uma div (configurada com efeitos em CSS) uma listagem de erros no topo do formulário.
Dentro da tag é criado um CSS para cada parágrafo e, por motivo de design, em cada campo e dentro da tag são criados os labels com seus respectivos campos e propriedades, como Nome, Sexo, CPF, Propriedades, Data de nascimento, Número de filhos, Salário, além do botão Enviar. Em cada campo existe um name, id, obrigatório (se permite a validação), o rótulo (descrevendo o nome do campo para ser exibido na mensagem) e o tipo de dado (onde é comparado o que o usuário informou com o tipo de dado que é correto).
Ao testar a página, se o usuário não informar os dados em seus respectivos campos, será exibida na página uma div contendo as mensagens de erro, de acordo com a Figura 1.
Exibindo Mensagens Elaboradas
Agora nesse tópico será abordado um formulário contendo campos básicos simulando um cadastro de clientes com os elementos HTML text, radio, checkbox e password, a serem validados via JavaScript com jQuery, exibindo para o usuário uma mensagem em cada campo no formulário caso exista erro no seu preenchimento.
Será criada uma pasta ValidaçãoJQueryComMelhorias e dentro dessa será criada uma outra pasta _js, onde serão incrementados os arquivos nos formatos .js (JavaScript). Os arquivos que foram colocados na pasta _js do primeiro exemplo (ValidaçãoJQueryTopo) podem ser colocados nessa pasta, porém, será necessário colocar a função funções.js, que está descrita na Listagem 3.
function validar()
{
var msg="";
var tudo_ok=true;
$("[obrigatorio=sim]").each(function(){
msg="";
if( $(this).attr("type") == "radio" )
{
if( $("input[name="+$(this).attr("name")+"]:checked")
.length == 0 )
{
msg = "O campo " + $(this).attr("rotulo") + "
é obrigatório";
}
}
else
if( $(this).attr("type") == "checkbox" )
{
if( $("input[grupock="+$(this).attr("grupock")+"]
:checked").length < $(this).attr("qde_min") )
{
msg = "Pelo menos "+$(this).attr("qde_min")+"
opção(ões) do campo(s) " + $(this).attr("rotulo")
+ " deve(m) ser marcado(s)!";
}
}
else
if( $(this).val() == '' )
{
msg = 'O campo '+ $(this).attr("rotulo")+' é obrigatório !';
}
else
if( $(this).attr("tipo_dado") == "cpf" &&
!validaCPF($(this).val()) )
{
msg = 'O campo '+ $(this).attr("rotulo")+'
deve ser válido !';
}
else
if( $(this).attr("tipo_dado") == "data" &&
!verificaData($(this).val()) )
{
msg = 'O campo '+ $(this).attr("rotulo")+'
deve ser uma data válida !';
}
else
if( $(this).attr("tipo_dado") == "inteiro" &&
!numInteiro($(this).val()) )
{
msg = 'O campo '+ $(this).attr("rotulo")+'
deve ser um numero inteiro válido !';
}
else
if( $(this).attr("tipo_dado") == "real" &&
!numReal($(this).val()) )
{
msg = 'O campo '+ $(this).attr("rotulo")+'
deve ser um numero real válido !';
}
else
if( $(this).attr("tipo_dado") == "email" &&
!ValidaEmail($(this).val()) )
{
msg = 'O campo '+ $(this).attr("rotulo")+'
deve ser um email válido !';
}
if( msg != '' )
{
tudo_ok = false;
}
if( $('#div_error_'+$(this).attr("name")) )
{
$('#div_error_'+$(this).attr("name")).html(msg);
}
});
return tudo_ok;
}Essa função é responsável por criar uma validação para cada tipo de campo radio e checkbox, além das propriedades text serem comparadas com a função val.
Antes são criadas duas variáveis: uma com o nome msg (responsável por receber as mensagens de cada campo) e outra com o nome tudo_ok (responsável por retornar para o formulário se houve erros durante a validação da página, exibindo a mensagem no campo com erro através do div_error). Se não houver erros, a página é submetida.
Dentro da pasta ValidaçãoJQueryComMelhorias será criada uma outra pasta com o nome de _css e será criado um novo arquivo de texto com o nome de estilo.css a ser implementado com o código descrito na Listagem 4.
@charset "utf-8";
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p{
margin: 2px;
padding: 2px;
}
.class_font_rotulo {
font-weight:bold;
display:block;
}
.class_error {
font-size:12px;
color:#FF0000;
margin-left:5px;
font-weight:normal;
margin-bottom:10px;
}Em seguida, dentro da pasta ValidaçãoJQueryComMelhorias será criado um arquivo com o nome jquery_form1 no formato .html e terá o mesmo código descrito na Listagem 5.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Validando Formulários com jQuery - 2 </title>
<script language="javascript" src="_js/jquery-1.6.1.min.js"></script>
<script language="javascript" src="_js/funcoes.js"></script>
<script language="javascript" src="_js/jquery.maskedinput-1.1.4.pack.js"
></script>
<script language="javascript">
$(document).ready(function(){
// utilização do plugin de maskara
$("#cpf").mask("999.999.999-99");
$("#data_nasc").mask("99/99/9999");
$("#formcad").submit(validar_custom);
$('[obrigatorio=sim]').each(function(){
$("label[for="+$(this).attr("name")+"]")
.append(" <span style='color:red;'>*</span> ")
.css('font-weight','bold');
});
});
function validar_custom()
{
var tudo_ok;
tudo_ok = validar();
if( !tudo_ok ) { return false; }
if( $('#senha').val() != $('#senha_confirm').val() )
{
$('#div_error_senha_confirm').html('A confirmação da senha é
diferente da senha!');
return false;
}
return true;
}
</script>
<link href="_css/estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h3>Validando Formulários com jQuery - 2 </h3>
<form method="post" id="formcad" action="">
<label for="nome" class="class_font_rotulo">Nome:</label>
<input type="text" name="nome" id="nome" obrigatorio="sim"
rotulo="nome do cliente" size="60" maxlength="100"/>
<div id="div_error_nome" class="class_error"></div>
<label for="sexo" class="class_font_rotulo" >Sexo</label>
<label><input type="radio" name="sexo" id="sexoM" value="M"
rotulo="sexo" obrigatorio="sim">Masculino<br></label>
<label><input type="radio" name="sexo" id="sexoF" value="F"
>Feminino</label><br>
<div id="div_error_sexo" class="class_error"></div>
<label for="cpf" class="class_font_rotulo" >CPF:</label>
<input type="text" name="cpf" id="cpf" obrigatorio="sim"
rotulo="CPF" tipo_dado="cpf" size="25" maxlength="14"/>
<div id="div_error_cpf" class="class_error"></div>
<label for="tem_carro" class="class_font_rotulo" >Propriedades:</label>
<label><input type="checkbox" name="tem_carro" id="tem_carro" value="S"
obrigatorio="sim" rotulo="propriedades" grupock="propriedade"
qde_min="1">Carro<br></label>
<label><input type="checkbox" name="tem_moto"
id="tem_moto" value="S" grupock="propriedade">Moto<br></label>
<label><input type="checkbox" name="tem_imovel"
id="tem_imovel" value="S" grupock="propriedade">Imóvel<br></label>
<div id="div_error_tem_carro" class="class_error"></div>
<label for="data_nasc" class="class_font_rotulo" >Data de nascimento:</label>
<input type="text" name="data_nasc" id="data_nasc"
obrigatorio="sim" rotulo="Data de nascimento" tipo_dado="data" />
<div id="div_error_data_nasc" class="class_error"></div>
<label for="filhos" class="class_font_rotulo" >Número de filhos:</label>
<input type="text" name="filhos" id="filhos" obrigatorio="sim"
rotulo="número de filhos" tipo_dado="inteiro" />
<div id="div_error_filhos" class="class_error"></div>
<label for="salario" class="class_font_rotulo" >Salário:</label>
<input type="text" name="salario" id="salario" obrigatorio="sim"
rotulo="salário" tipo_dado="real" />
<div id="div_error_salario" class="class_error"></div>
<label for="senha" class="class_font_rotulo" >Senha:</label>
<input type="password" name="senha" id="senha" obrigatorio="sim" rotulo="senha" />
<div id="div_error_senha" class="class_error"></div>
<label for="senha_confirm" class="class_font_rotulo" >Confirmação da Senha:</label>
<input type="password" name="senha_confirm" id="senha_confirm"
obrigatorio="sim" rotulo="senha" />
<div id="div_error_senha_confirm" class="class_error"></div>
<p> </p>
<input type="submit" value="Enviar" />
</form>
</body>
</html>Dentro do comando script language="javascript" src são feitas as importações dos arquivos que estão no formato .js localizados na pasta _js a serem utilizados na página.
Em seguida, é declarada a função JQuery $(document).ready(function(), que é responsável por colocar máscaras no CPF e na Data de Nascimento para o formulário, enviar por submissão a função validar_custom ao formulário e também contém uma condição dizendo que se na propriedade de cada campo houver a tag obrigatório=sim é mostrada para o usuário a mensagem de erro com design em CSS.
A função validar_custom contém uma variável denominada tudo_ok, que recebe a função validar() (programada anteriormente no arquivo funções.js) e é responsável por retornar mensagens ao formulário durante a sua validação quando houver erros e também por validar a comparação dos campos senha e confirmação de senha, verificando se ambos foram informados igualmente.
Abaixo é criado um comando link href="_css/estilo.css" que é responsável por importar os efeitos de CSS do arquivo estilo.css criado anteriormente dentro da pasta _css que servirá como um design para o formulário.
Dentro das tags são criados os labels com seus respectivos campos e propriedades, que são: Nome, Sexo, CPF, Propriedades, Data de nascimento, Número de filhos, Salário, Senha, Confirmação da Senha, e o botão Enviar. Em cada campo existe um name, id, obrigatório (se permite a validação), o rótulo (descrevendo o nome do campo para ser exibido na mensagem) e o tipo de dado (onde é comparado o que o usuário informou com o tipo de dado que é correto).
Se ao testar a página e não informar dados em seus respectivos campos, será exibida na página uma div abaixo de cada campo, contendo as mensagens de erro, de acordo com o que mostra na Figura 2.
Veja que o primeiro exemplo ValidaçãoJQueryTopo é recomendado para quem deseja que as mensagens sejam exibidas independentemente da forma com que os campos estejam sendo apresentados no formulário, fazendo com que um único elemento div seja responsável por exibir as mensagens no topo. Já o segundo exemplo ValidaçãoJQueryComMelhorias é recomendado para quem deseja um formulário mais elaborado, com melhor desempenho e que cada campo seja responsável por haver uma mensagem de erro (caso exista), sendo assim, cada campo apresente sua div própria.
- Plugin: jQuery
- Arquivo: jquery.maskedinput-1.1.4.pack
