Upload
tony-guirrugo
View
463
Download
1
Embed Size (px)
DESCRIPTION
Upload de vários arquivos com PHP 5
Citation preview
Upload de vários arquivos com PHP
22.856 visualizações
2 1
Fala pessoal, hoje irei ensinar a fazer upload de vários arquivos de uma vez, ou seja, ao
invés de criar apenas um campo para o usuário selecionar o arquivo, vamos criar
múltiplos campos e fazer o upload de cada arquivo para o servidor através do PHP.
Clique aqui para fazer download do código
1. Formulário
Vamos criar nosso formulário, vou utilizar aqui como exemplo cinco campos para
upload:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Upload de vários arquivos com PHP</title>
</head>
<body>
<h1>Upload de vários arquivos com PHP</h1>
<form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post"
enctype="multipart/form-data">
<p><input type="file" name="arquivo[]" /></p>
<p><input type="file" name="arquivo[]" /></p>
<p><input type="file" name="arquivo[]" /></p>
<p><input type="file" name="arquivo[]" /></p>
<p><input type="file" name="arquivo[]" /></p>
<p><input type="submit" value="Enviar" /></p>
</form>
</body>
</html>
Criamos um formulário e na action definimos que os dados serão enviados para o próprio
arquivo, através do $_SERVER['PHP_SELF']. Cada campo de upload receberá o
mesmo nome, ou seja, arquivo, porém iremos colocar [] (colchetes) para que assim o php
interprete como um array, onde cada arquivo receberá um índice e assim nós poderemos
manipular esses arquivos.
* Lembrando que quando se trata de upload devemos definir a propriedade
enctype=”multipart/form-data”;
2. Upload com PHP
Já que os dados serão enviados ao mesmo arquivo, vamos colocar nosso código PHP
nesse mesmo arquivo, vou optar por colocá-lo entre o header 1 (h1) e o ínicio do
formulário:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?php // DEFINIÇÕES
// Numero de campos de upload
$numeroCampos = 5;
// Tamanho máximo do arquivo (em bytes)
$tamanhoMaximo = 1000000;
// Extensões aceitas
$extensoes = array(".doc", ".txt", ".pdf", ".docx");
// Caminho para onde o arquivo será enviado
$caminho = "uploads/";
// Substituir arquivo já existente (true = sim; false = nao)
$substituir = false;
for ($i = 0; $i < $numeroCampos; $i++) {
// Informações do arquivo enviado
$nomeArquivo = $_FILES["arquivo"]["name"][$i];
$tamanhoArquivo = $_FILES["arquivo"]["size"][$i];
$nomeTemporario = $_FILES["arquivo"]["tmp_name"][$i];
// Verifica se o arquivo foi colocado no campo
if (!empty($nomeArquivo)) {
$erro = false;
// Verifica se o tamanho do arquivo é maior que o permitido
if ($tamanhoArquivo > $tamanhoMaximo) {
$erro = "O arquivo " . $nomeArquivo . " não deve
ultrapassar " . $tamanhoMaximo. " bytes";
}
// Verifica se a extensão está entre as aceitas
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
elseif (!in_array(strrchr($nomeArquivo, "."), $extensoes)) {
$erro = "A extensão do arquivo <b>" . $nomeArquivo .
"</b> não é válida";
}
// Verifica se o arquivo existe e se é para substituir
elseif (file_exists($caminho . $nomeArquivo) and !$substituir) {
$erro = "O arquivo <b>" . $nomeArquivo . "</b> já existe";
}
// Se não houver erro
if (!$erro) {
// Move o arquivo para o caminho definido
move_uploaded_file($nomeTemporario, ($caminho .
$nomeArquivo));
// Mensagem de sucesso
echo "O arquivo <b>".$nomeArquivo."</b> foi enviado
com sucesso. <br />";
}
// Se houver erro
else {
// Mensagem de erro
echo $erro . "<br />";
}
}
}
?>
Bom, apesar do código estar comentado, vou tentar detalhar o máximo possível:
Linha 4: Definimos o número de campos para enviar arquivo, no nosso caso, 5;
Linha 6: Definimos o tamanho máximo de cada arquivo, em bytes, no caso é equivalente
a aproximadamente 1MB;
Linha 8: Definimos todas as extensões válidas e colocamos em um array;
Linha 10: Definimos a pasta onde os arquivos serão gravados (não esqueça de colocar
uma / – barra – depois do nome da pasta);
Linha 12: Definimos se deve ser ou não substituido um arquivo já existente, quando
false, o arquivo não será substituido, quando true, o arquivo será substituido;
Linha 14: Fazemos um loop para recuperar os dados, fazer a verificação e upload de
cada campo de upload, o loop só irá terminar quando nosso contador ($i) for igual ao
número de campos;
Linhas 17, 18, 19: Recuperamos as informações do arquivo do campo;
Linhas 27, 28, 29: Se o tamanho do arquivo for maior que o definido, será gerado um
erro;
Linhas 31, 32, 33: Pegamos a extensão do arquivo através da função strrchr() e
verificamos se ela está contida no array das extensões válidas, se não estiver, será gerado
um erro;
Linhas 35, 36, 37: Verificamos se o arquivo já existe e se deve ser substituido ou não;
Linhas 40 a 45: Se não houver nenhum erro, movemos o arquivo que foi enviado para o
caminho definido e exibimos a mensagem de sucesso, caso contrário um erro será
exibido.
Bom, espero que vocês tenham entendido. Qualquer dúvida entre em contato, ok? Espero
que esse artigo tenha sido útil a vocês, abraços.
Formulário dinâmico com jQuery
Bom galera , é o primeiro post aqui e venho trazer a vocês uma forma de otimizar as
páginas de cadastro com um formulário dinâmico através do jQuery.
Qual a ideia ?
A princípio a ideia é inserir o formulário de acordo com a demanda, não sobrecarregando
a página com elementos que possivelmente não iram ser usados e identificar cada campo
com o atributo name diferente para recuperá-los mais tarde. Bom, acho que consegui me
expressar … então vamos botar a mão na massa!
HTML
Primeiramente precisamos de nosso formulário
?
Código
01
02
03
04
05
06
07
08
09
10
11
12
13
<form method="get" action="processa.php">
<table>
<thead>
<tr>
<th>Item</th>
<th>Quantidade</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="item1" size="60" /></td>
<td><input type="text" name="quantidade1" size="10" /></td>
</tr>
14
15
16
17
18
</tbody>
</table>
<!--Irá armazenar a quantidade de linhas-->
<input type="hidden" value="1" name="quantidade_itens" />
</form>
Agora precisamos de dois elementos que posteriormente irão disparar o envio do
formulário e a inserção de novos inputs.
?
Código
1
2
<a href="#" id="enviar">Enviar lista de compras</a>
<a href="#" id="mais">Add Item</a>
jQuery
Para enviar o formulário, iremos associar o seu método .submit() ao evento .click() de um
dos elementos que criamos para este fim. Aqui utilizaremos o link com id enviar.
?
Código
1
2
3
4
// JavaScript Document
$('#enviar').click(function(){
$('form').submit();
});
E Agora o X da questão!
Dentro do evento .click() do link com id mais vamos:
1. Armazenar numa variável a quantidade de linhas de nossa tabela.
2. Inserir o código html da linha que contém os inputs com a propriedade name
concatenada com o número da linha a ser inserida que armazenamos na variável
next.
3. E por fim atualizar o valor do elemento :hidden que usamos para armazenar a
quantidade de linhas.
?
Código
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
$('#mais').click(function(){
//recuperando o próximo numero da linha
var next = $('#lista tbody').children('tr').length + 1;
//inserindo formulário
$('#lista tbody').append('<tr>' +
'<td><input type="text" name="item' + next + '" /></td>' +
'<td><input type="text" name="quantidade' + next + '" /></td>' +
'</tr>');
//armazenando a quantidade de linhas ou registros no elemento hidden
$(':hidden').val(next);
return false;
});
Mas pra que serve saber a quantidade de linhas de registros neste formulário ?
É simples, como criamos o formulário dinâmico, devemos informar à página que irá
receber os dados qual a quantidade de registros que ela irá receber.
Pronto, o script já está funcionando. Mas para um melhor entendimento mostraremos
como a página irá receber estes dados.
PHP
A pagina deverá conter uma variável para recuperar a quantidade de itens, (lembra aquela
que comentamos ?) e um loop que terá como limite nossa variável.
Dentro dele basta recuperar os valores concatenando a propriedade name do campo com
o número da repetição.
?
Código
01
02
03
04
05
06
07
08
09
10
11
12
13
<?php
$quantidade_itens = $_GET['quantidade_itens'];
for ( $x = 1; $x <= $quantidade_itens ; $x++ ){
$item = $_GET["item$x"];
$quantidade = $_GET["quantidade$x"];
//aqui seu código com o uso dos valores capturados
}
?>
Veja a
Demo
O que fizemos basicamente ?
Inserimos através do método .append() os inputs com o atributo name concatenado com a
quantidade de linhas mais 1, que atribuímos à variável quantidade. Sendo assim somente
o final da propriedade name irá mudar , facilitando a recepção dos dados por outra
página. Implementando então uma inserção dinâmica onde todos os valores poderão ser
capturados.
Obs:. É bom lembra que essa é “uma” das formas de se fazer … cada um pode
implementar da maneira que quiser mas o conceito , como já mencionei, é sempre o
mesmo.
Atenção para a dica:
Aqui não foi associado nenhum evento aos inputs, mas se necessário, é preciso utilizar o
método .live() para que este evento se estenda a todos os inputs.
Um abraço e até o próximo post!
Upload dinâmico com PHP/jQuery
43.025 visualizações
27 20
http://rafaelcouto.com.br/upload-dinamico-com-php-jquery/
Olá pessoal, tudo certo? Várias pessoas me perguntam como fazer upload de arquivos
com ajax e hoje pretendo apresentar uma solução para isso. Na verdade, não se trata de
um upload com ajax, mas sim um upload dinâmico, porém para um usuário comum isso é
indiferente.
A solução é simples e conhecida: fazer um iframe contendo um campo do tipo file,
fazemos o envio desse arquivo dentro do iframe e então com a ajuda do jQuery
recuperamos as informações desse arquivo e trazemos para a página pai. Nesse artigo irei
utilizar anexo de arquivos como exemplo.
Confira o resultado final
1. Upload (upload.php)
Inicialmente iremos fazer uma página que fará o upload de um arquivo, assim como é
feito normalmente. Caso você tenha dúvidas, pode consultar esses dois artigos: Upload
simples de imagem com PHP/MySQL e Upload de vários arquivos com PHP.
<?php // Flag que indica se há erro ou não
$erro = null;
// Quando enviado o formulário
if (isset($_FILES['arquivo']))
{
// Extensões permitidas
$extensoes = array(".doc", ".txt", ".pdf", ".docx", ".jpg");
// Caminho onde ficarão os arquivos
$caminho = "uploads/";
// Recuperando informações do arquivo
$nome = $_FILES['arquivo']['name'];
$temp = $_FILES['arquivo']['tmp_name'];
// Verifica se a extensão é permitida
if (!in_array(strtolower(strrchr($nome, ".")), $extensoes)) {
$erro = 'Extensão inválida';
}
// Se não houver erro
if (!isset($erro)) {
// Gerando um nome aleatório para o arquivo
$nomeAleatorio = md5(uniqid(time())) . strrchr($nome, ".");
// Movendo arquivo para servidor
if (!move_uploaded_file($temp, $caminho . $nomeAleatorio))
$erro = 'Não foi possível anexar o arquivo';
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Upload dinâmico com jQuery/PHP</title>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<form id="upload" action="upload.php" method="post" enctype="multipart/form-data">
<label>Arquivo: </label> <span id="status" style="display: none;"><img
src="image/loader.gif" alt="Enviando..." /></span> <br />
<input type="file" name="arquivo" id="arquivo" />
</form>
</body>
</html>
Bom pessoal, nesse arquivo será feito apenas um upload simples. Resumindo, quando
enviado o formulário nós recuperamos as informações desse arquivo, verificamos se sua
extensão é válida, caso seja, geramos um nome aleatório para esse arquivo e enviamos
para o servidor.
Vamos agora criar nosso código javascript (utilizando jQuery), que será incluído no
cabeçalho desse arquivo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$(function($) {
// Definindo página pai
var pai = window.parent.document;
<?php if (isset($erro)): // Se houver algum erro ?>
// Exibimos o erro
alert('<?php echo $erro ?>');
<?php elseif (isset($nome)): // Se não houver erro e o arquivo foi enviado ?>
// Adicionamos um item na lista (ul) que tem ID igual a "anexos"
$('ul#anexos', pai).append('<li lang="<?php echo $nomeAleatorio ?>"><?php
echo $nome ?> <img src="image/remove.png" alt="Remover" class="remover"
onclick="removeAnexo(this)" \/> </li>');
<?php endif ?>
// Quando selecionado um arquivo
$("#arquivo").change(function() {
// Se o arquivo foi selecionado
if (this.value != "")
{
// Exibimos o loder
$("#status").show();
// Enviamos o formulário
$("#upload").submit();
}
});
});
Talvez não faça tanto sentido agora, porém mais adiante você entenderá melhor, vamos
aos detalhes:
Linha 3: Como esse arquivo ficará dentro de um iframe, precisamos saber quem é
a página pai, para isso definimos uma variável com o documento da página pai;
Linha 5, 8: Aqui está um detalhe interessante. Como a linguagem servidor (PHP)
é executada primeiro que a cliente (javascript), nós fazemos um teste. Se a
variável erro foi definida, nós imprimimos um alert, que depois será executada
pelo javascript, que exibirá uma mensagem de alerta com o erro que foi
armazenado;
Linha 10: Caso não haja erro, e a variável nome foi definida, ou seja, o arquivo
foi enviado;
Linha 13: Colocamos na lista (que será criada adiante) com ID igual a anexos um
item, porém perceba que foi passado no segundo parâmetro do seletor a variável
pai, portanto ele irá buscar o ul#anexos da página pai. Nesse item colocamos o
nome aleatório do arquivo na propriedade LANG. Logo após, colocamos uma
imagem que será responsável por remover o anexo, note que definimos, no evento
onclick, a chamada da função removeAnexo(), está será explicada adiante.
Linha 18: Quando o usuário selecionar um arquivo.
Linha 20: Verificamos se um arquivo foi realmente selecionado.
Linha 23: Exibimos nosso loader (carregando).
Linha 25: Enviamos o formulário via javascript.
2. A página pai (index.php)
Está será a página principal, onde colocaremos o iframe que incluirá o nosso arquivo de
upload:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Upload dinâmico com jQuery/PHP</title>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<h1>Upload dinâmico com jQuery/PHP</h1>
<ul id="anexos"></ul>
<iframe src="upload.php" frameborder="0" scrolling="no"></iframe>
<form id="upload" action="index.php" method="post">
<input type="submit" name="enviar" value="Enviar" />
</form>
</body>
</html>
Nessa estrutura, criamos a lista (ul#anexos) onde serão adicionados os anexos, logo
abaixo criamos nosso iframe e chamamos nosso arquivo de upload (upload.php). A essa
altura, nosso upload dinâmico já está “funcional”, porém precisamos criar a função para
remover o anexo:
1
2
3
4
5
6
7
8
9
10
11
// Função para remover um anexo
function removeAnexo(obj)
{
// Recuperando nome do arquivo
var arquivo = $(obj).parent('li').attr('lang');
// Removendo arquivo do servidor
$.post("index.php", {acao: 'removeAnexo', arquivo: arquivo}, function() {
// Removendo elemento da página
$(obj).parent('li').remove();
});
}
Linha 2: Criamos nossa função que receberá como parâmetro o elemento da
imagem;
Linha 5: A imagem está dentro do item (li), certo? Portanto, através do método
parent() selecionamos o item (li) e pegamos o valor da propriedade LANG
(Lembra que colocamos o nome do arquivo aqui?);
Linha 7: Fazemos uma requisição ajax com nosso próprio arquivo, e passamos
como ação „removeAnexo‟ e também o nome do arquivo anexado. Isso será
preciso para que possamos remover o arquivo do servidor;
Linha 9: Quando terminado a requisição, removemos o elemento li de nossa
página.
Vamos então criar a função PHP (logo no inicio do arquivo) que removerá o arquivo do
servidor:
<?php // Quando a ação for para remover anexo
if ($_POST['acao'] == 'removeAnexo')
{
// Recuperando nome do arquivo
$arquivo = $_POST['arquivo'];
// Caminho dos uploads
$caminho = 'uploads/';
// Verificando se o arquivo realmente existe
if (file_exists($caminho . $arquivo) and !empty($arquivo))
// Removendo arquivo
unlink($caminho . $arquivo);
// Finaliza a requisição
exit;
}
?>
Parece que agora acabou né? Ainda não. Como iremos recuperar esses anexos quando
enviado o formulário? Já que nosso formulário está simplesmente assim:
<form id="upload" action="index.php" method="post">
<input type="submit" name="enviar" value="Enviar" />
</form>
A solução é criar campos ocultos com os nomes dos arquivos quando enviado o
formulário, para isso:
1
2
3
4
5
6
7
8
9
10
11
12
$(function($) {
// Quando enviado o formulário
$("#upload").submit(function() {
// Passando por cada anexo
$("#anexos").find("li").each(function() {
// Recuperando nome do arquivo
var arquivo = $(this).attr('lang');
// Criando campo oculto com o nome do arquivo
$("#upload").prepend('<input type="hidden" name="anexos[]" value="' +
arquivo + '" \/>');
});
});
});
Linha 3: Quando nosso formulário for enviado;
Linha 5: Procuramos cada item (li) em nossa lista de anexo e passamos por cada
um através do laço each();
Linha 7: Recuperamos o nome (aleatório) do arquivo que foi armazenado na
propriedade LANG;
Linha 9: Através do prepend() adicionamos um campo oculto (hidden) dentro de
nosso formulário (#upload) e colocamos o nome do arquivo como valor. Note que
atribuímos o nome como anexos[] para que assim possamos recuperar os anexos já
dentro de um array com PHP.
Agora, para fins de teste você pode adicionar o seguinte no inicio do arquivo:
// Se enviado o formulário
if (isset($_POST['enviar']))
{
echo 'Arquivos enviados: ';
echo '<pre>';
// Exibimos os arquivos anexados
print_r($_POST['anexos']);
echo '</pre>';
}
Assim, você pode perceber, que quando enviado o formulário, o nome de nossos arquivos
ficaram no array anexos e então podemos armazená-los no banco de dados, por exemplo.
jQuery: Duplicar campos de formulários (2)
http://www.zatecus.com/blog-jquery-duplicar-campos-de-formularios-2-post.html
Olá pessoal!
Muitos leitores gostaram de meu post onde ensinei a duplicar campos de formulários
utilizando o jQuery. Bem, volto novamente a ensinar esta dica através do código fonte
comentado, porém, com novas funcionalidades! Agora é possível remover linhas da
tabela e a definir um limite máximo de linhas! Confira!
Começando com o HTML...
01 <form action="pagina.php" method="post">
02 <table cellpadding="4" cellspacing="0" border="1">
03 <thead
>
04 <tr>
05 <td>Dia</td>
06 <td>Hora</td>
07 <td>Resultado</td>
08 <td>Seleção</td>
09 <td> </td
>
10 </tr>
11 </thead>
12 <tbody id="repetir">
13 <tr id="linha_1">
14 <td><input type="text" name="dia[]" value="" /></td>
15 <td><input type="text" name="hora[]" value="" /></td>
16 <td><input type="text" name="resultado[]" value="" /></td>
17 <td>
18 <select name="selecao[]">
19 <option></option>
20 <option value="1">Seleção 1</option>
21 <option value="2">Seleção 2</option>
22 <option value="3">Seleção 3</option>
23 </select>
24 </td>
25 <td><input type="button" value="Remover" id="remove"
onclick="$.removeLinha(this);" /></td>
26 </tr>
27 </tbody>
28 <tfoot>
29 <tr>
30 <td align="right" colspan="5"><input type="button" value="Adicionar"
id="add" /><input type="submit" value="Enviar" /></td>
31 </tr>
32 </tfoot
>
33 </table>
34 </form>
No código acima, destaco este trecho de exemplo para explicar...
1 <input type="text" name="dia[]" value="" />
Para quem não sabe, estas chaves "[]", presentes dentro do atributo name, servem para
fazer o formulário guardar as informações de cada linha em uma array, podendo assim
serem lidas pelo PHP ou outra linguagem utilizada.
Agora, o código em jQuery que faz tudo acontecer!
01 /* Função jQuery para remover linha */
02
03 $.removeLinha = function (element)
04 {
05
06 /* Conta quantidade de linhas na tabela */
07
08 var linha_total = $('tbody#repetir tr').length;
09
10 /* Condição que mantém pelo menos uma linha na tabela */
11
12 if (linha_total > 1)
13 {
14
15 /* Remove os elementos da linha onde está o botão clicado */
16
17 $(element).parent().parent().remove();
18
19 }
20
21 /* Avisa usuário de que não pode remover a última linha */
22
23 else
24 {
25
26 alert("Desculpe, mas você não pode remover esta última linha!");
27
28 }
29
30 };
31
32 /* Quando o documento estiver carregado… */
33
34 $(document).ready(function()
35 {
36
37 /* Variável que armazena limite de linhas (zero é ilimitada) */
38
39 var limite_linhas = 5;
40
41 /* Quando o botão adicionar for clicado... */
42
43 $('#add').click(function()
44 {
45
46 /* Conta quantidade de linhas na tabela */
47
48 var linha_total = $('tbody#repetir tr').length;
49
50 /* Condição que verifica se existe limite de linhas e, se existir, testa se usuário
atingiu limite */
51
52 if (limite_linhas && limite_linhas > linha_total)
53 {
54
55 /* Pega uma linha existente */
56
57 var linha = $('tbody#repetir tr').html();
58
59 /* Conta quantidade de linhas na tabela */
60
61 var linha_total = $('tbody#repetir tr').length;
62
63 /* Pega a ID da linha atual */
64
65 var linha_id = $('tbody#repetir tr').attr('id');
66
67 /* Acrescenta uma nova linha, incluindo a nova ID da linha */
68
69 $('tbody#repetir').append('<tr id="linha_' + (linha_total + 1) + '">' + linha +
'</tr>');
70
71 }
72
73 /* Se usuário atingiu limite de linhas… */
74
75 else
76 {
77 alert("Desculpe, mas você só pode adicionar até " + limite_linhas + " linhas!");
78 }
79
80 });
81
82 });
Nota: Incluir o código jQuery acima dentro das tags <script>, é claro!
Confira uma demonstração clicando aqui.
Abraços a todos e façam bom proveito do código! :)
Validando Formulários com Javascript
31.172 visualizações
12 1
Com o PHP ou ASP, podemos validar um formulário, porém é necessário atualizar a página e
tudo acaba sendo mais demorado. Com Javascript isso fica mais fácil, pois não é necessário nem
atualizar a página. Mas lembrando que é necessário também a validação com o lado servidor
(PHP ou ASP), pois o javascript pode ser burlado.
Clique aqui para ver o que será feito
É uma validação simples, porém de muita utilizadade. Vamos ao código (O código completo está
disponível para download no final do artigo):
1. Criando o formulário:
Primeiramente, vamos fazer nosso formulário:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
<title>Validando Formulários com Javascript</title>
</head>
<body>
<form name="form1" action="enviar.php" method="post">
Nome:
<input name="nome" type="text"><br /><br />
Email:
<input name="email" type="text"><br /><br />
Senha:
<input name="senha" type="password"><br /><br />
Repitir Senha:
<input name="rep_senha" type="password"><br /><br />
<input type="submit" onclick="return validar()">
</form>
</body>
</html>
- Bom aqui criamos o formulário;
- Linha 15: [onclick="return validar()"] estamos chamando a função validar() no momento que o
usuário clicar em enviar;
2. Criando a função validar()
Agora, vamos criar nosso código javascript para fazer validação, lembrando que esse código
deve estar, de preferência, entre as tags head (cabeçalho):
1
2
3
4
<script language="javascript" type="text/javascript">
function validar() {
}
</script>
- No código acima foi criada a função validar();
1
2
3
4
5
6
7
8
<script language="javascript" type="text/javascript">
function validar() {
var nome = form1.nome.value;
var email = form1.email.value;
var senha = form1.senha.value;
var rep_senha = form1.rep_senha.value;
}
</script>
- Dentro de nossa função criamos as varíaveis para cada campo de nosso formulário;
- Linha 3: criamos a varíavel nome e atribuimos o valor do campo nome, ou seja
form1.nome.value (Valor do campo nome do nosso formulário);
- O mesmo foi feito nas linhas 4, 5 e 6;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script language="javascript" type="text/javascript">
function validar() {
var nome = form1.nome.value;
var email = form1.email.value;
var senha = form1.senha.value;
var rep_senha = form1.rep_senha.value;
if (nome == "") {
alert('Preencha o campo com seu nome');
form1.nome.focus();
return false;
}
}
</script>
- Linha 8: Se nome (O campo nome, pois declamos a variável) estiver em branco, as ações serão
executadas;
- Linha 9: Dispara uma mensagem de alerta dizendo que o usuário deve preencher o campo
nome;
- Linha 10: Da foco no campo nome;
- Linha 15: Retorna a resposta false, ou seja, que não deve continuar enviando os dados;
- Resumindo, caso o campo nome esteje em branco será exibido uma mensagem de alerta
dizendo ao usuário que preencha o campo com seu nome;
- O mesmo pode e será feito com os outros campos;
1
2
3
4
5
if (nome.length < 5) {
alert('Digite seu nome completo');
form1.nome.focus();
return false;
}
- Podemos verificar também se um campo tem o número de caracteres mínimo/máximo
especificado.
- Para isso utilizamos length, ou seja, se o numero de caracteres do campo nome for menor que 5
a ação será executada.
1
2
3
4
5
if (senha != rep_senha) {
alert('Senhas diferentes');
form1.senha.focus();
return false;
}
- Podemos também ver se dois campos coincidem, no caso a senha e sua repetição;
- Se senha (campo senha) for diferente de rep_senha (Campo Repitir Senha) as ações serão
executadas;
- Podemos utilizar todos os métodos de comparação:
Menor que: <
Maior que: >
Igual a: ==
Diferente de: !=
Conclusão
Isso é só um pouco do que o javascript pode fazer, mas já é útil para validar seus formulários de
uma forma mais rápida e fácil.