PI S7 DSW II DouglasARS: mudanças entre as edições
imported>Douglas |
imported>Douglas |
||
| Linha 82: | Linha 82: | ||
==Validação de campos com Javascript== | ==Validação de campos com Javascript== | ||
Partindo do nosso '''sistema exemplo''' que é feito com HTML, CSS e PHP, vamos fazer as validações com JavaScript, para verificar se o usuário preencheu alguns campos. No script abaixo, vou mostrar um exemplo fazendo com que somente alguns campos sejam obrigatórios. Este script eu coloquei no arquivo '''funcoes.php''', mas poderia estar dentro do arquivo em que ele é utilizado. | Partindo do nosso '''sistema exemplo''' que é feito com HTML, CSS e PHP, vamos fazer as validações com JavaScript, para verificar se o usuário preencheu alguns campos. No script abaixo, vou mostrar um exemplo fazendo com que somente alguns campos sejam obrigatórios. Este script eu coloquei no arquivo '''funcoes.php''', mas poderia estar dentro do arquivo em que ele é utilizado. Lembre-se de chamar o arquivo através do '''include''' no PHP. | ||
<pre> | <pre> | ||
| Linha 110: | Linha 110: | ||
</script> | </script> | ||
</pre> | </pre> | ||
Este script, basicamente, possui uma função '''validaForm()''' que recebe o nome do campo e a informação contida nele, compara verificando se está vazio e retorna um alerta com a mensagem se tiver erros. Se não tiver erros, retorna ao cadastro de clientes (formulário cadclientes) submetendo ao método post do banco de dados. | |||
=Organização da Semana 7= | =Organização da Semana 7= | ||
Edição das 23h34min de 27 de março de 2016
Apresentação
Olá Alunos,
Entramos pela sétima semana, vamos de leve essa semana, já que vocês tem bastante trabalho pela frente e vou aproveitar para mostrar ou relembrar, se for o caso, como utilizar máscaras para entrada de dados em campos de formulário. Também vamos apresentar uma técnica de validação das informações desses campos utilizando PHP. Fiquem atentos e façam uso do Fórum: Pergunte ao Professor no moodle.
Bons estudos a todos!
Prof. Douglas A.
Objetivo
- Máscaras para campos de formulário;
- Validação de campos.
Máscaras de Campos
Quando estamos desenvolvendo uma aplicação web que trabalha com formulários e banco de dados, surgirá uma necessidade: a chamada máscara dos campos. Isso ocorre quando queremos que usuário do sistema entre com uma informação com um formato pré-determinado de modo que seja necessário respeitar os padrões pré-determinados.
Antes disso, é necessário termos nosso banco devidamente modelado, pois assim o processo de recuperação das informações é menos trabalhoso, sem falar na questão de aparência na exibição dos dados.
Exemplo: utilizando máscara podemos definir que o campo telefone só poderá aceitar caracteres numéricos os caracteres ( ) -. Ficando assim: abre parênteses na 1ª posição, fecha parênteses na 4ª posição e o traço na 9ª posições. garantindo com isso, que todos os números de telefone serão no estilo (99)9999-9999.
Telefone é só um exemplo, podemos usar máscaras para CPF: 999999999-99 , CNPJ: 99.999.999/9999-99, datas: 99/99/9999, CEP: 99999-99, etc.
- Como utilizar máscaras?
Para facilitar esse processo um tanto complexo de construção de máscaras, utilizamos algo relativamente simples, o script jquery com o complemento jquery.maskedinput.
Para baixar os arquivos clique em: jquery.js e jquery.maskedinput.js.
O trecho do código abaixo exemplifica o uso da máscara em um arquivo de formulário. Coloquei até máscaras que ainda não utilizei para servirem de exemplo.
[...]
</head>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.maskedinput.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
$("input.data").mask("99/99/9999");
$("input.cpf").mask("999999999-99");
$("input.cep").mask("99999-999");
$("input.telefone").mask("(99)9999-9999");
});
</script>
<body>
[...]
Notem que os arquivos jquery.js e jquery.maskedinput.js estão dentro da pasta scripts que eu criei dentro da pasta padrão da aplicação. Portanto, vocês devem indicar o local para onde foram copiados os arquivos para que as máscaras funcionem corretamente.
- Como fica uso?
Para utilizar é simples. O trecho do código que mostra como chamar a máscara já criada para os campos de formulário pode ser visto em seguida.
[...] CEP:<input type="text" class="cep" name="cep" size="18" /> CPF:<input type="text" class="cpf" name="cpf" size="18" /> DATA:<input type="text" class="data" name="data" size="18" /> Telefone:<input type="text" class="telefone" name="telefone" size="18" /> Celular: <input type="text" class="telefone" name="celular" size="18" /></td></tr> [...]
Observem que aquele campo size tem haver com o tamanho da área da tela, e não tem nada haver com total de caracteres.
Validação de Campos
Existem algumas maneiras de se fazer a validação de campos de formulário. Entre elas estão a validação pela aplicação, assim que o formulário é submetido, ou pelo banco de dados, onde a tarefa se torna um pouco mais complexa, pois se tem que tratar erros da tentativa de gravar no banco e que pra maioria dos programadores iniciantes pode ser bastante complicado. Vamos optar por fazer a validação dos dados já nos campos de formulário antes de enviar para o banco de dados, mas lembre-se, quando na modelagem de banco ao se definir que um campo não pode aceitar nulo (not null), este deve ser tratado pela aplicação, pois senão, ao se tentar gravar dados no banco, vai retornar um erro e não se concretizará a gravação.
Existem técnicas utilizadas em sistemas que fazem a validação através de requisições (GET ou POST), dessa forma sempre que o usuário clicar em Salvar é feita uma requisição, processamento dos dados e então a validação. Essas validações através de requisições (refresh nas páginas) são utilizadas para processamentos que precisam de validações complexas. Coisas simples como: verificar se o nome está vazio, se o email é válido ou se a senha é segura podem ser feitas via JavaScript sem muito trabalho e ainda retornar a resposta ao usuário sem precisar dar um refresh na página, ou seja, em real-time.
Validação de campos com Javascript
Partindo do nosso sistema exemplo que é feito com HTML, CSS e PHP, vamos fazer as validações com JavaScript, para verificar se o usuário preencheu alguns campos. No script abaixo, vou mostrar um exemplo fazendo com que somente alguns campos sejam obrigatórios. Este script eu coloquei no arquivo funcoes.php, mas poderia estar dentro do arquivo em que ele é utilizado. Lembre-se de chamar o arquivo através do include no PHP.
<script type="text/javascript">
function validaForm()
{
erro = false;
if($('#nm_cliente').val() == '')
{
alert('Você precisa preencher o campo NOME.');erro = true;
}
if($('#email').val() == '' && !erro)
{
alert('Você precisa preencher o campo E-mail.');erro = true;
}
if($('#telefone').val() == '' && !erro)
{
alert('Você precisa preencher o campo TELEFONE.');erro = true;
}
//se nao tiver erros
if(!erro)
{
$('#cadclientes').submit();
}
}
</script>
Este script, basicamente, possui uma função validaForm() que recebe o nome do campo e a informação contida nele, compara verificando se está vazio e retorna um alerta com a mensagem se tiver erros. Se não tiver erros, retorna ao cadastro de clientes (formulário cadclientes) submetendo ao método post do banco de dados.
Organização da Semana 7
Nesta sexta semana apresentamos [...] Um abraço,
Bom trabalho!
Prof. Douglas A.
Referências
[1] http://www.devmedia.com.br/validacao-de-dados-em-php-com-jquery-validate/28544#ixzz446zNC4me
[2] https://www.oficinadanet.com.br/post/12811-formulario-de-contato-em-php
| << | <> | >> |
|---|