test

this is test

Validação de campos com jQuery Validate

Outro dia tive a necessidade de criar um plugin pro jQuery que validasse  campos sem precisar de formulário, apenas uma identificador de onde estivesse esses campos – div por exemplo. O plugin é baseado em outro já existente, o jQuery Validation, que apesar de ser muito bom, não atendia minhas necessidades.

Para utilizá-lo é muito simples, basta importar o jQuery, o plugin e chamar o método de validação. Veja o exemplo abaixo:

<script type="text/javascript" language="javascript">
	$(document).ready(function(){
		var teste = $("#formulario").validate();
		$("#enviar").click(function(){
			alert(teste.checkAll());
		});
	});
</script>

O trecho $(document).ready(function(){ espera o documento carregar para utilizar o que vem dentro.

O código var teste = $(“#formulario”).validate(); chama a função de validação, onde irá percorrer todos os objetos dentro #formulario que você queria que sejam validados (abaixo informações quais) e retorna uma função, esta serve para verificar se tá tudo correto ou não quando o usuário submiter o formulário.

A linha $(“#enviar”).click(function(){ só é chamada quando o usuário clicar no objeto com ID #enviar e alerta se todos os campos estão preenchidos corretamente no código alert(teste.checkAll()); . Repare que a variável teste recebeu a função retornada anteriormente. Você pode utilizar o checkAll para saber se pode enviar o formulário ou não.

Attributo	Descrição	Exemplo
required	Indica que o campo é obrigátório. Vale lembrar que o atributo class pode ter mais de um valor (class=”minhaclass required”).	<input type=”text” class=”required” />
email	Indica que se o campo tiver valor, ele valor deverá ser um e-mail válido. Você pode utilizá-los junto com a classe required ou só, mas nesse caso só irá disparar o erro caso esteja preenchido com algum valor.	<input type=”text” class=”required email” />
url	Indica que se o campo tiver valor, ele valor deverá ser um endereço de site válido. O valor não poderá ser ao mesmo tempo email e url ou outro, caso coloque mais de uma classe de tipo, prevalecerá o primeiro.	<input type=”text” class=”required url” />
date	Indica que se o campo tiver valor, ele valor deverá ser uma data válida no formaro dd/mm/yyyy.	<input type=”text” class=”date” />
number	Indica que se o campo tiver valor, ele valor deverá ser um número.	<input type=”text” class=”number” />
equalTo	Esse atributo indica que o valor do camo deve ser igual o valor do campo indicado pelo. Ele não deve ser utilizado como uma classe, é um atributo comum do HTML.	<input type=”password” id=”idpass” /> <input type=”password” equalTo=”idpass” />
maxlength	Indica que o campo que tiver esse atributo, não deverá contar mais X caracteres. X é o valor do attributo.	<input type=”text” maxlength=”10” />
minlength	Indica que o campo não poderá ter que menos que X caracteres. X é o valor do atributo.	<input type=”text” minlength =”5” />
rangelength	Indica que o campo deve conter entre X e Y caracteres, onde X é o valor inicial e Y o final separados por vírgula.	<input rangelength=”2,5″ />
range	Indica que o campo deve ter um valor entre X e Y, onde X é o menor número e Y o maior separados por vírgula.	<input range=”2,5″ />
max	Indica o valor máximo de um campo. Este valor é o valor do atributo.	<input max=”10″ />
min	Indica o valor mínimo de uma campo. Este valor é o valor do atributo.	<input min=”10″ />
higherToday	É um valor do atributo class e endica que o campo deve conter uma data maior que a data de hoje. Atenção, este deve ser utilizado com o valor date para validação correta da data.	<input />
dateHigher	É um atributo que indica que a data deve ser maior que a data do campo indicado,o ID do é passado em valor. Atenção, este deve ser utilizado com o valor date para validação correta da data.	<input /> <input dateHigher=”iddata” />

Opções do Plugin
O plugin vem com algumas configurações padrão, como por exemplo as mensagens que aparecem nos tooltips, ou as cores do tooltip. Você pode alterar alterar esses valores, para isso basta indicá-los ao chamar a função validate. Veja o exemplo:

var teste = $("#formulario").validate({
	errorClass: 'error',
	validClass: 'valid',
	messages: {
		required: "Por favor, preencha este campo.",
		email: "Por favor, digite um e-mail válido.",
		url: "Por favor, digite uma URL válida.",
		date: "Por favor, digite uma data válida (dd/mm/aaaa).",
		number: "Por favor, digite apenas números.",
		equalTo: "Por favor, indique o mesmo valor novamente.",
		maxlength: "Por favor, não insira mais que {0} caracteres.",
		minlength: "Por favor, não insira menos que {0} caracteres.",
		rangelength: "Por favor, insira um valor entre {0} e {1} caracteres.",
		range: "Por favor, insira um valor entre {0} e {1}.",
		max: "Por favor, indique um valor inferior ou igual a {0}.",
		min: "Por favor, indique um valor maior ou igual a {0}.",
		higherToday: "Por favor, digite uma data maior que hoje",
		dateHigher: "Por favor, digite uma data maior que a data anterior"
	},
	tooltip: {
		opacity: '1',
		color: "#9C2F2F",
		background: "#F79982",
		border: "solid 1px #9C2F2F",
		width: "auto",
		padding: "3px"
	}
});

Observe que o nome das variáveis dentro de “messages” são os menos dos atribibutos.

As duas primeiras opções errorClass e validClass são os nomes das classes de erro e de válido que são aplicadas ao formulário quando faz a checagem dos campos. Para que o fundo fique vermelho quando o campo estiver errado, terá que criar um CSS com a class passada na configuração, caso não passe nenhum valor de configuração a classe se chamará error.

A variável de configuração tooltip recebe o CSS da tooltip com a mensagem, você poderá colocar atributo CSS válido dentro dela.

Download