java

Usando o tempo livre.

Posts Tagged ‘Struts2

Validações – Client Side

leave a comment »

Objetivo

Apresentar o conceito de validação, sem apontar a melhor, mas sim mostrar as formas que podemos utilizar para implementação em aplicações web. Apontando aspectos positivos e negativos de todos os conceitos abordados.

Introdução

Neste primeiro artigo, de dois, vamos estudar o conceito de validação lado cliente (Client-Side), e como podemos implementar, para isto, os exemplos que serão mencionados utilizará o Struts2, JavaScript e Frameworks JavaScript. este exemplo pode ser executado em um simples formulário HTML, contudo, como a intenção é a utilização de validações em aplicações web, foi optado por essa estrutura

Para configurar o projeto ou baixar o exemplo pronto, veja o artigo Preparando projeto para executar as validações.

O que são?

Como a própria definição de validar, sugere:

Tornar ou declarar válido = legitimar

Em nosso contexto, meio pelo o qual vamos tentar garantir que determinadas informações em um formulário, sejam preenchidas e/ou siga uma regra ou formato, conforme a nossa aplicação as esperam.

Porque validar?

Para garantirmos que uma informação que o seja crucial, seja para indentificação de um usuário, seja para realizar uma consulta, sejam preenchidas de acordo com o esperado (ie: CPF, RG), que podem ser usados em uma consulta por um cliente, um funcionário e etc.

Como validar?

Vamos ao que interessa, implementaremos uma validação em Javascript de um formulário web com um grupo de informações obrigatórias.

Primeiro crie um formulário em src/main/webapp/jsp, com o nome clientSide.jsp

<!DOCTYPE html PUBLIC
 "-//W3C//DTD XHTML 1.1 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%@taglib prefix="s" uri="/struts-tags" %>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <title>Valida&ccedil;&atilde;o - Client-Side</title>
 <s:head />
</head>
<body>
 <s:form action="clientSide">
 <s:textfield key="lb.nm" name="nome" id="nm"/>
 <s:textfield key="lb.cpf" name="cpf" id="cpf"/>
 <s:textfield key="lb.email" name="email" id="email"/>
 <s:textfield key="lb.endereco" name="endereco" id="end"/>
 <s:submit value="Validar" id="btnS" method="salvar"/>
 </s:form>
</body>

</html>

Listagem 1 – formulário html simples.

Adicione na tag script a seguinte function:


function validaCampos(){
var nm = document.getElementById('nm'), cpf = document.getElementById('cpf')
, email= document.getElementById('email'), end = document.getElementById('end');

if(nm.value == ""){
alert('');
nm.focus();
return false;
}
if(cpf.value == ""){
alert('');
cpf.focus();
return false;
}
if(email.value == ""){
alert('');
email.focus();
return false;
}
if(end.value == ""){
alert('');
end.focus();
return false;
}
 }

Listagem 2 – Function Js que irá validar o formulário antes do submit.

Adicione na tag form do formulário o atributo onsubmit, como mostrado a seguir:

 <s:form action="clientSide" onsubmit="return validaCampos();">

Agora, vamos criar a action que receberá a requisição, src/main/java, no pacote postvalidations criar  arquivo com o nome “ClientSideAction.java”, com o código a seguir:

@Conversion()
public class ClientSideAction extends ActionSupport {

 private static final long serialVersionUID = 1L;

 private String nome;
 private String cpf;
 private String endereco;
 private String email;

 public String execute() throws Exception {
  return INPUT;
 }
 public String salvar() throws Exception {
  return SUCCESS;
 }

 public String getNome() {
  return nome;
 }

 public void setNome(String nome) {
  this.nome = nome;
 }

 public String getCpf() {
  return cpf;
 }

 public void setCpf(String cpf) {
  this.cpf = cpf;
 }

 public String getEndereco() {
  return endereco;
 }

 public void setEndereco(String endereco) {
  this.endereco = endereco;
 }

 public String getEmail() {
  return email;
 }

 public void setEmail(String email) {
  this.email = email;
 }

}

Listagem 3 – Action que receberá a requisição.

Adicione no arquivo struts.xml localizado em src/main/resources, a seguinte action:


<action name="clientSide" class="postvalidations.ClientSideAction">
 <result name="input">/jsp/clientSide.jsp</result>
 <result>/jsp/clientSide-scs.jsp</result>
</action>

Listagem 4 – Struts.xml – Deve ser adicionado para ocorrer a requisição ao action.

Observação: se  houver deletado os arquivos actions gerados pelo archetype do maven, para não haver problemas as linhas que irão instanciar as actions não exitentes devem ser removidas.

Agora em propriedades do projeto, adicionte o runtime do seu servidor, meu caso tomcat, assim será possivel executar usando o run on server -> seu server, no eclipse.

Para realizar os testes vá em:  http://localhost:8080/post-validations/clientSide.action

Concluindo

está primeira parte do artigo abordou a validação utilizando técnicas javascripts, trabalhando diretamente com o “document object”, no próximo, trabalharemos com a validação utilizando uma biblioteca JavaScript para validações.

Quaisquer dúvidas em relação a este primeiro artigo, dicas, sugestões, serão bem vindas!

Obrigado, até o próximo…

Written by Valdilanio Cruz

janeiro 11, 2011 at 12:24 am