Validação de formulários com jQuery e VRaptor
É comum o uso de bibliotecas JS e plugins jQuery para validar campos em formulários HTML. Contudo, por vezes esse tipo de validação não atende às necessidades do desenvolvedor, seja por expor o procedimento de validação, por uma necessidade de acessar dados de uma base de dados ou por qualquer outro motivo que justifique a utilização da codificação dessa regra diretamente em classes JAVA.
Nesse post, será demonstrado de forma simples como levar a validação de campos para dentro do contexto de execução JAVA de uma aplicação Java WEB que utiliza VRaptor.
Como já foi demonstrado em posts anteriores, o VRaptor traz uma simplicidade muito grande para tratamento de eventos AJAX, e por isso a solução implementada não exigiu muita codificação, nem qualquer tipo de configuração além da padrão dos projetos desse framework.
A imagem a seguir mostra o fluxo disparado a cada modificação de um campo com um método de validação.
Passos para configurar o ambiente:
1 – Instalação
Para utilizar a validação por AJAX você deve incluir o arquivo CSS validation.css e os arquivos JS jquery-1.4.4.min.js e jquery.vraptor.validate.js, que estão disponibilizados para download ao final desse post, no HEAD da sua página.
Exemplo:
<link href="http://k2cloud.net/vraptor/common/css/validation.css" rel="stylesheet" type="text/css" media="all"> <script src="http://k2cloud.net/vraptor/common/js/jquery-1.4.4.min.js" type="text/javascript"></script> <script src="http://k2cloud.net/vraptor/common/js/jquery.vraptor.validate.js" type="text/javascript"></script>
2 – Configuração do formulário
Após adicionar os arquivos, você precisa adicionar ao seu form a classe validate. Essa classe será o gatilho para que as funções JS interceptem o formulário cada vez que ele for submetido e verifiquem se existem mensagens de erro nos campos do mesmo.
Além da configuração do formulário, cada campo deve ser anotado com a mesma classe validate, assim você poderá definir quais os campos do formulário deverão ser validados.
Como a validação é feita diretamente em um Controller do VRaptor, nos campos do formulário será adicionado atributo alt, presente na tag INPUT, contendo o path do método responsável pela validação.
Pronto, a configuração da página JSP está concluída e abaixo segue o código do formulário deste exemplo:
<form class="validate" action="<c:url value="/validate/save"/>" method="post"> <p> <label>E-mail:</label> <input type="text" class="validate"alt="/validate/email/"/> </p> <p> <label>Number:</label> <input type="text" class="validate"alt="/validate/number/"/> </p> <p> <label>Length:</label> <input type="text" class="validate"alt="/validate/lenght/"/> </p> <p> <input type="submit" value="Submit"> </p> </form>
3 – Criação de um método de validação
Nesse caso, criamos o controller ValidationController com 3 métodos de validação, um para campo do formulário. Por serem validações bem simples de e-mail, campo numérico e número de caracteres do campo, a explicação será suprimida e, abaixo, você poderá ver a implementação completa da classe.
import static br.com.caelum.vraptor.view.Results.json;
import br.com.caelum.vraptor.Path;
import br.com.caelum.vraptor.Post;
import br.com.caelum.vraptor.Resource;
import br.com.caelum.vraptor.Result;
@Resource
public class ValidationController {
private final Result result;
public ValidationController(Result result) {
this.result = result;
}
@Path("/validate")
public void page() {
}
@Post
@Path("/validate/save")
public void save() {
result.include("retorno", "passou");
result.redirectTo(ValidationController.class).page();
}
@Path("/validate/email/{value}")
public void emailValidate(String value) {
boolean success = false;
if(value.contains("@") && value.contains(".")
&& value.lastIndexOf(".") > value.indexOf("@")) {
success = true;
}
result.use(json()).from(success).serialize();
}
@Path("/validate/number/{value}")
public void numberValidate(String value) {
boolean success = false;
try {
new Double(value);
success = true;
} catch (Exception e) {
//e.printStackTrace();
}
result.use(json()).from(success).serialize();
}
@Path("/validate/lenght/{value}")
public void lenghtValidate(String value) {
boolean success = false;
if(value.length() >= 5 && value.length() <= 10) {
success = true;
}
result.use(json()).from(success).serialize();
}
}
É isso. Concluídos esses 3 passos, o sistema já estará pronto para validar os formulários diretamente no controller.
- Biblioteca: Download
Olá Daniel,
Gostei do post. Bem fácil de entender o conceito.
Parabén pelo design desse blog e do site da K2studio.
Abraço,
Luiz
Muito legal o conceito!
Principalmente por ser unobstrusive! Porém eu acho que validações simples do tipo tamanho do campo e se é e-mail ou não deveria ser feito por client-side mesmo…
Obrigado Thiago. A idéia é exatamente essa, usar esse tipo de validação somente em casos que a regra precise de consultas no banco ou coisas do tipo.