Revista PHP / Java Script
Bruno Lustosa
Bruno Lustosa tem 29 anos, e programa desde os 8. Conhece diversas linguagens de programação, entre elas PHP, sendo certificado pela Zend(ZCE - Zend Certified Engineer). Trabalha com redes e desenvolvimento a 9 anos, e atualmente, coordena a área de desenvolvimento da HóspedeVIP, uma central de reserva de hotéis pela Internet.
Validação de dados em Javascript
No meu último artigo, vimos como é importante fazer a validação dos dados no PHP. No artigo, mostrei como fazer essa validação usando a classe Validate do PEAR.
Se você já fez algum formulário HTML, sabe o quanto é chato e entediante fazer as funções para validar os dados. Normalmente, a validação é feita ou no evento onsubmit do formulário, ou então no onclick do botão de envio. Daí, uma função é chamada pra verificar cada campo, e dar um alerta na tela. Essas funções normalmente são feitas manualmente, de acordo com as regras para cada campo do formulário, e em um sistema com dezenas deles, a tarefa se torna altamente entediante e propensa a erros.
A boa notícia é que existe um framework de validação em Javascript chamado jsval, que facilita o trabalho de criar as rotinas de validação.
O funcionamento dele é bem simples:
Antes de mais nada, é necessário baixar o jsval através do endereço: http://jsval.fantastic-bits.de/
Vamos criar um HTML para fazer uma troca de senha. Nesse formulário, teremos que informar a senha atual, a senha nova duas vezes, para confirmar. Vamos ao código:
<html>
<head>
<script type="text/javascript" src="jsval.js"></script>
<script type="text/javascript" src="frmSenha.validate.js"></script>
<title>Mudança de senha</title>
</head>
<body onload="initValidation()">
<form action="#" method="post" id="frmSenha" onsubmit="return validateStandard(this)">
<label for="senha_atual">Senha atual:</label>
<input type="password" name="senha_atual" id="senha_atual" /><br />
<label for="senha_nova1">Senha nova:</label>
<input type="password" name="senha_nova1" id="senha_nova1" /><br />
<label for="senha_nova2">Confirme a senha:</label>
<input type="password" name="senha_nova2" id="senha_nova2" /><br />
<input type="submit" value="Alterar senha" />
</form>
</body>
</html>
Podemos notar algumas diferenças neste formulário:
1-Temos 2 scripts importados na seção <head>. O primeiro deles é o próprio framework, e o segundo é um arquivo que contém as regras de validação deste formulário. É esse arquivo que precisará ser modificado para cada formulário que você fizer.
2-Na tag <body>, adicionei um evento onload. Esta função tem por objetivo definir as regras para a validação do formulário, e está definida no arquivo frmSenha.validate.js, importado na seção <head>.
3-O formulário também ganha um evento onsubmit. A finalidade deste evento é chamar a rotina que valida os dados assim que o formulário for submetido.
4-Por último, é necessário criar o arquivo contendo as regras de validação, que no nosso caso, ficará no arquivo frmSenha.validate.js:
function initValidation()
{
var objForm = document.getElementById('frmSenha')
// senha atual é necessária
objForm.senha_atual.required = 1
objForm.senha_atual.err = 'Digita a sua senha atual.'
// nova senha é necessária e precisa ter no mínimo 6 caracteres
objForm.senha_nova1.required = 1
objForm.senha_nova1.minlength = 6
objForm.senha_nova1.err = 'A senha nova deve ter no mínimo 6 caracteres.'
// a confirmação é necessária, precisa ter no mínimo 6 caracteres
// e além disso precisa ser igual ao campo com a senha
objForm.senha_nova2.required = 1
objForm.senha_nova2.minlength = 6
objForm.senha_nova2.equals = 'senha_nova1'
objForm.senha_nova2.err = 'As duas senhas digitadas não conferem.'
}
Esta função define regras para os 3 campos do formulário. Essas regras são bem simples, mas o manual do jsval dá muitas outras opções, pra tratar todo tipo de dado. Como visto acima, é possível definir uma mensagem de erro para cada campo.
Feito isso, está tudo pronto. Para testar, é só colocar os arquivos com o Javascript no mesmo diretório e carregar o HTML no navegador. Se tudo estiver certo, o navegador deve exibir alertas caso os campos não satisfaçam os requerimentos.
É importante lembrar que a validação no PHP também é importantíssima, pois se o navegador do usuário não suportar Javascript, ou se ele for desligado, a validação não será feita, e o seu script PHP terá que fazer a validação para evitar problemas. Outro ponto bom de fazer a validação via Javascript dessa forma, é que mesmo que o navegador não suporte Javascript, o formulário continuará funcionando. Caso o envio fosse feito usando uma tag <button> com um evento onclick, o formulário não poderia ser enviado.
Opções de Interação
Comentários
Nunca é bom contar com o Javascript para segurança, pois além de poder estar desabilitado, pode simplesmente nao estar presente.
A validação no Javascript é útil para dar uma experiência melhor ao usuário, pois evita a postagem de dados inválidos.
Porém, como eu disse no último paragrafo do artigo, é importantíssimo que a validação seja feita tambem do lado do servidor (no PHP), para que qualquer coisa inválida que por um acaso seja postada (de má fé, por exemplo) não seja aceita.
[]s
Gostaria de saber se esse código pode ser desligado por alguém que queira agir de má fé?