Depois de ter mostrado o Ajax Form Plugin, como prometido irei falar neste post sobre o Plugin para jQuery Validate.
O que é o Validate?
O Validate é um plugin para o jQuery que permite que você possa centralizar todas as validações de dados no formulário, tanto no cliente como no servidor. Neste post irei falar sobre a validação no cliente somente.
Este é um dos plugins mais antigos e o mais completo na minha opinião. Você pode controlar todas as validações, mensagens e ainda ter a possibilidade de facilmente criar novos métodos de validação. Além de tudo, ele é integrado com o Ajax Form Plugin para que os dados enviados com sucesso seja enviado por Ajax.
Irei mostrar o funcionamento básico deste plugin na prática:
[jsfiddle url=”http://jsfiddle.net/yhgbV/3/” include=”result”]
Neste exemplo, há um formulário com os campos nome, idade, e-mail e país. Esses campos não foram usados por acaso. O campo nome foi usado para mostrar como é simples a validação de campos que precisam ser preenchidos com algum valor. No campo idade irei ilustrar como criar um novo método para o Plugin, neste caso o usuário tem que ter mais de 18 anos. No campo e-mail irei mostrar como pode ser usado os métodos já definidos no plugin. O campo país mostra como validar selects, radios e checkboxes.
As mensagens de erro e como elas irão serem mostradas são totalmente personalizáveis, tanto onde e como elas irão aparecer tanto como no CSS. Por padrão, o plugin irá gerar um label logo depois do campo com a classe error. Isso pode ser modificado em suas configurações facilmente. Além do label, o input do elemento que não foi validado corretamente também irá ter uma classe error.
Vamos ao código HTML do formulário:
[jsfiddle url=”http://jsfiddle.net/yhgbV/3/” include=”html”]
Assim, o estilo da classe de erro ficaria:
[jsfiddle url=”http://jsfiddle.net/yhgbV/3/” include=”css,html”]
Note que foi passado o elemento label para estilizar somente a classe error aplicada a algum label e não o elemento input.
Depois de fazer o download do plugin, você poderá utilizar o seguinte código no head do documento abaixo do arquivo referente ao core do jQuery:
[jsfiddle url=”http://jsfiddle.net/yhgbV/3/” include=”javascript,html,result”]
Irei explicar passo a passo o código:
Primeiro, você passa um seletor para referenciar um formulário(neste caso o id do formulário) e executa o método validate, que aceita um objeto de parâmetros:
- submitHandler: esta opção irá especificar o comportamento do formulário quando a validação passar com sucesso. Aqui é onde o plugin pode ser integrado com o Ajax Form plugin, o parâmetro form é a referência do formulário passado no seletor do jQuery.
- rules: Este é o objeto de regras de validação. Cada item deste objeto refere-se ao name do formulário. Se o formulário apenas não pode ser vazio, você pode passar uma string ‘required’, caso contrário você tem que especificar dentro deste campo todas as regras de validação, que seria um novo objeto. O campo nome e país neste caso apenas não pode ser vazio, enquanto que os demais possui outras regras.
- messages: da mesma forma que o rules, mas com especificação de qual mensagem será exibida quando a validação não passar. Cada método possui mensagens pré-definidas que estão em inglês, você pode especificar qualquer mensagem aqui ou alterar o código fonte dos métodos de validação para aparecer mensagens padrões.
No caso da regra minAge eu criei um novo método de validação:
[gist]https://gist.github.com/3087709.js?file=validate_maior_que_dezoito.js”[/gist]
Esta é a sintaxe para criação de novos métodos para o Validate. Primeiro você atribui um nome para o método (para ser usado dentro do objeto rule) e passa uma função que retorna um valor Booleano para verificar se a validação confere. O primeiro parâmetro é o valor digitado ou escolhido pelo usuário(no caso do input, o valor digitado e do select, o valor escolhido). O segundo parâmetro é o elemento que está sendo validado (Elemento DOM) e o terceiro é o parâmetro passado na regra de validação. No caso da validação de idade, o primeiro parâmetro é a idade que o usuário digitou, o segundo é o input e o terceiro é o valor inserido na regra. Sendo assim ele verifica primeiro se o parâmetro é opcional, por que caso seja, ele não precisa validar e o segundo verifica se o valor digitado é maior que o valor atribuido na regra (você pode, por exemplo, colocar na regra que a idade seja maior que 21).
O ideal é colocar todas as regras de validação personalizadas em um arquivo javascript separado e inserir logo depois do plugin Validate.
Com a validação de selects, checkboxes e radio buttons é possível trabalhar da mesma forma que um input. No caso do select, o value colocado para o option “Selecione um país ” é vazio, sendo assim ele não irá passar com sucesso na validação.
Espero que tenha ajudado a todos e não se esqueçam de olharem a documentação, experimentar e colocar em prática para descobrir todas as funcionalidades do Plugin.
Veja abaixo o resultado final com o código de exemplo completo com os arquivos fonte:
[jsfiddle url=”http://jsfiddle.net/yhgbV/3/” include=”result,html,js,css”]
Ótima dica!
Gostaria de sugerir um post sobre plugins de mascara do jQuery.
Cara valeu pelo artigo. Me ajudou muito.
Parabéns mesmo.
Abs
bom post se seu site tiver sido feito com essa tecnologia ela deve ser boa mesmo
Não roda no IE6
nada roda no IE6…
@tiago: Realmente tiago, está ocorrendo um erro de script que está impedindo o funcionamento. Vou dar uma olhada para descobrir o motivo e atualizo aqui quando tiver descobrido a solução.
cara, estou migrando aos poucos para jquery e esta excelente seu artigo.
ai vai minha duvida… no prototype, tem um plugin de validacao tb, mas nele, assim que o usuário sai do campo o plugin informa logo o erro. Nesse plugin tem isso?
Outra coisa… no prototype, eu posso setar um campo como validação de data, mas não obrigatório. Testei isso no plugin do jquery e nao achei… se eu coloco somente um tipo de validação, sem que ela seja obrigatória, ele continua me obrigando a por algo no campo..
valeu!
O exemplo que passou (link) a validação não funciona
@Mateus: Testei os links e eles estão funcionando normalmente. Qual link não está funcionando? Abraços
Não funciona em campos tipo file
O plugin e muito mesmo facilica muito na hora de validar forms ^_^
@felipe. A validação em campos file realmente não é possível por padrão. De acordo com o criador do plugin, com um método adicional isto é possível:
jQuery.validator.addMethod(“accept”, function(value, element, param) {
return value.match(new RegExp(“.” + param + “$”));
});
rules: {
fileupload: { accept: “(jpe?g|gif|png)” }
}
sou leigo ainda, e estou com uma dúvida esse script vai fazer uma consulta em cada letra que digitar no campo ?
@Marcelo: Não. Ele fará a consulta ao enviar o formulário ou quando o usuário sair do campo (evento blur) se for especificado nas suas opções. Espero que tenha ajudado e boa sorte.
Alexandre,
Parabéns pelo seu exemplo. Excelente mesmo!
Só tenho uma dúvida:
Preciso fazer uma validação de senha de forma que a senha anterior não possa ser igual a nova senha. Além do mais, a senha nova tem que ter um caracter em UPPER e pelo menos 3 números.
Vc tem idéia de como fazer?
Obrigada!
@Fabiane: Existe um método incluído no validate chamado ‘equalTo’ que faz o inverso, você pode usá-lo como referência para criar um personalizado, como explicado no post. O link para a sintaxe é http://docs.jquery.com/Plugins/Validation/Methods/equalTo. Eu sugeria que você pudesse criar um método ‘diferentTo’. O código seria basicamente este:
diferentTo: function(value, element, param) {
return value != $(param).val();
}
A sintaxe seria a mesma do equalTo, você passa o elemento que ele deseja verificar se é diferente.
Espero ter ajudado, boa sorte e fico muito feliz que o exemplo tenha sido útil.
Alexandre,
Tenho uma duvida. Dentro de rules você disse que eu devo passar o name do campo, mas se eu tiver vários formulários para validar, e não puder botar todos os nomes iguais, eu poderia fazer referência a class? pelo id eu sei que funciona, mas não sei como fazer para class.
Obrigado
@Vinicius: O validate não aceita referências que não seja classe ou id. Isto geraria várias inconsistências. Talvez tenha outra solução melhor e precise de mais detalhes do seu caso. Vários formulários com names iguais? Na hora de passar o validate você deve especificar apenas um, o ideal é uma regra por campo, mas se terá campos iguais talvez guardando o objeto em variáveis ajudaria no reaproveitamento. Como disse, estou falando sem saber detalhes da necessidade.
Esperto que tenha ajudado e boa sorte.
Parabéns pelo blog, Alexandre.
Em um post de agosto/2008, você disse que estava ocorrendo algum erro de script para o exemplo, no IE6. Ainda não está funcionando. Houve alguma atualização para corrigir que esteja em outra url?
Obrigado
@Geraldo: Olá geraldo, este erro está relacionado a uma virgula na linha 27 do exemplo acima. Existe uma vírgula que gera um erro de script somente no IE por causa da formatação do JSON. Toda chave de um objeto json não utiliza vírgula no último item. Obrigado…
o/
maldição! os input precisam do “name” além do “id”! Fiquei horas preso a isso!
valeu!
@Rafael: O plugin verifica o name e não o id… além disto o name é extremamente necessário pois é como o valor será obtido no server. Abraços…
Alguem poderia informar como posso colocar para funcionar? criei dois arquivos, um para o .html e outro para o .js e só retorna uma tela com o nome false. gostaria de um auxilio.
@Daniel: provavelmente o evento não está sendo “anexado” no formulário e deve estar fazendo o post sem ajax. Verifique se todos arquivos são carregados, se o seletor está sendo usado no form. Espero ter ajudado e boa sorte.
Ola Alexandre
Como que eu poderia dar um alert por ex: “Existem campos que devem ser informados!” antes de aparecer os labels de validação dos campos?
Obrigado
Você pode usar a opção invalidHandler, que seria um callback quando um erro é disparado, e você tem como parâmetros um elemento.
Otimo Alexandre, ja consegui aqui.
Outra duvida, as mensagens de erro nao esta aparecendo ao lado do campo qdo tenho mais de um campo de validaçao. Fica todos no mesmo lugar na posicao do primeiro campo e eu gostaria que ficasse no lado direito de cada campo.
O que eu posso estar fazendo de errado?
@Vinicius: Você precisa estilizar os campos via css para conseguir este efeito, provavelmente o elemento está inline, basta dar um display block na label que ele gera. Espero ter ajudado, abraços…
Ola alexandre,
Consegui que aparecesse todos os erros para cada campo, só os campos do tipo SELECT, os combos, a mensagem aparece embaixo do campo ao invés do lado…briquei aqui mas ate agora nao consegui fazer com que aparecessem ao lado. Tem alguma diferença para esse tipo de campo?
onde esta meu comentário?
Alexandre, queria saber como bloquear para a mensagem não aparecer toda as vezes que eu clicar no botão submit. No caso toda vez que clico no botão de submit, aparece a mensagem, avisando da validação.
@Vinícius: Não entendi o objetivo disto. Em que caso você gostaria q não validasse? Abraços,
A validação funcionou uma beleza!!! Porém, tenho uma dúvida:
Tenho uma página de login. Após o usuário digitar o usuário e a senha corretamente, quando clico no botão enviar, aparece a mensagem q todos os campos foram preenchidos corretamente, mas a página não direiciona para a página informada no “action” do form. Estou fazendo algo errado?
Ele tem um return false logo depois da mensagem que impede que o form seja enviado. Retire esta linha que ele irá seguir o fluxo normal que é realizar o evento submit do form. Espero ter ajudado e abraços.
Olá amigo, estou iniciando em formulários com jquery.
gostaria de lhe informar que pelo menos aqui o link DOWNLOAD DO PLUGIN, referencia: “Depois de fazer o download do plugin, você poderá utilizar o seguinte código no head do documento abaixo do arquivo referente ao core do jQuery:”
Não está funcionando, poderia corrigir?
Boa tarde!
Alexandre,
Se esse post estiver ativo ainda, gostaria que você desse uma olhada nesse código: http://jsfiddle.net/3kduC/2/
Estou a 3 dias tentado resolver os bugs desse formulário, utilizo o jquery.validate para validar os campos antes do submit, porém quando o campo é criado dinamicamente, a validação não é aplicada corretamente.
Se puder ajudar eu agradeço.
@Teilor: Realmente não irá funcionar para formulários dinâmicos. Você precisa anexar o evento do validate no momento em que os campos forem criados, caso contrário o validate não anexa os eventos nos elementos que ainda não estão no DOM. Espero ter ajudado e boa sorte.
@Matheus: Obrigado pelo feedback, link corrigido!
Depois de algum tempo consegui fazer funcionar com a função live();
Trata-se de um formulário onde se adiciona campos dinamicamente e atribui-se o validate para cada objeto criado.
http://jsfiddle.net/3kduC/15/
Fica a dica.
Abraços
Alexandre, existe um problema no jQuery Validate quando se usa Struts, no struts utlizando um Name para todos os campos. Resultado não funciona. Gostaria de saber se existe outro caminho para isso.
não seu se é essa a duvida
mas no form eu uso
Nome:
Digite um nome
e no header
$.validator.setDefaults({
submitHandler: function() {
alert(“Todos os campos foram preenchidos!”);
return false
}
});
$.metadata.setType(“attr”, “validate”);
$(document).ready(function() {
$(“#form1”).validate();
$(“#selecttest”).validate();
});
assim ele ja le o form e aplica as regras pra mim…
mas tenho o problema q citei abaixo
desculpa o html agora acho q vai aparecer
”
Nome:
Digite um nome”
droga num deu alguem me diga depois como usar html aki
então vamos descrever uso o atibuto validate=”required:true” no input nome e coloco uma tag depois do input label for=”nome”(para o nome do input) class=”error”
chamo a classe=’cmxform’ e id=form1 na abertura do form
$.validator.setDefaults({
submitHandler: function() {
alert(“Todos os campos foram preenchidos!”);
return false
}
});
$.metadata.setType(“attr”, “validate”);
$(document).ready(function() {
$(“#form”).validate();
$(“#selecttest”).validate();
});
então eu estou usando assim, mas tenho um problema quando preencho todos os campos e mando enviar, num ta voltando pro post q salva meus dados (anteriomente sem validação estava tudo bem agora ferrou)
Queria saber se tem como saber se todos os campos foram preenchidos sem enviar.
Tipo usando ‘onblur’. Desta forma eu poderia ‘ativar’ o botão ‘submit’ somente após a validação estiver 100%.
Desculpe a ignorância, talvez tenha uma forma mais correta de fazer e eu não sei. Se alguém puder dar uma luz. Obrigado.
Olá Roberto, no onblur de cada campo você pode chamar o método valid para saber se o formulário está válido e assim habilitar ou desabilitar o input como desejar.
amigo tava rodando a net pra solicionar o meu problema no jquery validate, que não estava funcionando no explorer ai lendo esses posts fiz o que vc disse sobre a virgula agora ta perfeito , so que to com um outro problema , derrepente vc pode me ajudar , no painel administrativo onde as pessoas fazem um cadastro tem um input file , no firefox funciona legal, no explorer ele nao funciona se voce puder me ajudar
Uma dúvida. Como validar campo do tipo radio com este plugin?
Amigo, a validação de campos radios funciona da mesma forma como os outros.
Olá galera alguém sabe como pegar os valores com o validate() assim:?
exemplo:
name=”text[154][378]”
name=”text[154][379]”
name=”text[154][380]”