Introdução ao jQuery
4.5 Validação e máscaras
}
});
});
});
</script>
</head>
<body>
<h4>Melhores destinos</h4>
<button id="carregar">Carregar lista</button> <ul id="lista">
</ul>
</body>
</html>
Para conseguir testar esta função é necessário que a mesma esteja dentro de um servidor web como, por exemplo, o apache.
4.5 Validação e máscaras
Validação é uma importante etapa durante o processamento e envio de formulários do HTML. Garantir que os campos estejam preenchidos de forma correta e com dados correspondentes ao tipo solicitado são tarefas cotidianas de todo desenvolvedor front-end. Felizmente, o jQuery e seus plugins oferecem uma ampla possibilidade de controlar e alertar ao usuário sobre inconsistências e erros. A seguir veremos alguns exemplos.
O primeiro passo é fazer o download do plugin jquery.validate no seguinte
link: http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js
Salve o arquivo jquery.validate.js na mesma pasta onde se encontra o seu arquivo html e o arquivo jquery.js. Com isso, podemos escrever o código a seguir:
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8"/>
<style>
.error{color:red}
</style>
<script src="jquery.js"></script>
<script src="jquery.validate.js"></script> <script>
$("document").ready(function(){
$("#formulario").validate();
});
</script>
</head>
<body>
<form id="formulario" action="cadastro.php">
Nome:
<input type="text" name="nome" class="required"/>
<br>
CPF:
<input type="text" name="cpf" class="required"/>
<br>
<input type="submit" value="enviar"/>
</form>
</body>
</html>
Para fazer a validação dos campos do formulário, precisamos:
1. Atribuir um id para o formulário.
2. Aplicar o método validate() no formulário.
3. Em cada campo do formulário que necessita validação, colocar
a classe "required".
A classe required é o tipo de validação mais simples. Com ela a verificação é feita apenas no caso do campo estar vazio. Existem outras possibilidades mais avançadas, como validação de email, url, datas e números. Observe o código a seguir:
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8"/>
<style>
.error{color:red}
</style>
<script src="jquery.js"></script>
<script src="jquery.validate.js"></script> <script>
$("document").ready(function(){
$("input[type='text']").attr("autocomplete","off");
$("#formulario").validate();
});
</script>
</head>
<body>
<form id="formulario" action="cadastro.php">
Nome:
<input type="text" name="nome" class="required"/><br>
CPF:
<input type="text" name="cpf" class="required"/><br>
Email:
<input type="text" name="email" class="required email"/> <br>
Site:
<input type="text" name="site" class="required url"/><br>
Data:
<input type="text" name="data" class="required date"/><br>
Nota:
<input type="text" name="nota" class="required number"/>
<br>
Idade:
<input type="text" name="idade" class="required digits"/><br>
<input type="submit" value="enviar"/>
</form>
</body>
</html>
Veja que para aperfeiçoar o tipo de validação, basta adicionar uma nova classe ao campo. No exemplo da validação de email, apenas adicionamos a classe email ao atributo class. Automaticamente o jQuery passa a validar o campo dentro da regra de sintaxe válida de emails. O mesmo ocorre para os campos site, data, nota e idade. O detalhe entre nota e idade é que o primeiro será validado como um número, seja inteiro ou real. Já a idade será validada apenas como números inteiros.
Uso de máscaras
É comum em formulários existir o que chamamos de máscaras, que são campos cuja formatação de entrada de dados é pré-definida. Campos que costumam fazer uso de máscara são, por exemplo, cep, cpf e telefone. Além disso, o uso de máscaras facilita a entrada de dados para o usuário.
O primeiro passo para usar máscaras no jQuery é baixar o plugin Mask:
http://plugins.jquery.com/mask/
Dentro do arquivo zip baixado, localize o arquivo jquery.mask.js, copie-o para dentro da mesma pasta do arquivo html e do jquery.js.
Com isso, podemos partir para o seguinte código que aplica uma máscara para os campos cep, cpf e telefone:
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8"/>
<script src="jquery.js"></script>
<script src="jquery.mask.js"></script> <script>
$("document").ready(function(){
$('#cep').mask('00000-000');
$('#fone').mask('(00) 0000-0000');
$('#cpf').mask('000.000.000-00', {reverse: true});
});
</script>
</head>
<body>
<form id="formulario" action="cadastro.php">
Telefone: <input type="text" id="fone"/><br>
CEP: <input type="text" id="cep"/><br>