upload de vários arquivos com php 5

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="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

http://rafaelcouto.com.br/artigos/upload_varios_arquivos/upload.rar

http://rafaelcouto.com.br/artigos/upload_varios_arquivos/upload.rar

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.

http://www.php.net/manual/pt_BR/function.strrchr.php

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>

http://jquerybrasil.org/formulario-dinamico-com-jquery/

14

15

16

17

18

</tbody>

</table>



<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!

http://jquerybrasil.org/demos/formulario-dinamico-com-jquery/




Upload dinâmico com PHP/jQuery


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

http://rafaelcouto.com.br/upload-dinamico-com-php-jquery/

http://rafaelcouto.com.br/artigos/upload_dinamico/

http://rafaelcouto.com.br/upload-simples-de-imagem-com-php-mysql/

http://rafaelcouto.com.br/upload-simples-de-imagem-com-php-mysql/

http://rafaelcouto.com.br/upload-de-varios-arquivos-com-php/

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';

}

}

?>



<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:



<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')

{


$arquivo = $_POST['arquivo'];

// Caminho dos uploads

$caminho = 'uploads/';

// Verificando se o arquivo realmente existe

if (file_exists($caminho . $arquivo) and !empty($arquivo))

// Removendo arquivo

http://api.jquery.com/parent/

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() {


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:

http://api.jquery.com/each/

http://api.jquery.com/prepend/

// 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>



http://www.zatecus.com/blog-jquery-duplicar-campos-de-formularios-post.html

http://www.zatecus.com/blog-jquery-duplicar-campos-de-formularios-post.html

17 <td>

18 <select name="selecao[]">

19 <option></option>

20 <option value="1">Seleção 1</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


47


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


60


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! :)

http://dl.zatecus.com/open/duplicar2.html

Validando Formulários com Javascript


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()

http://rafaelcouto.com.br/artigos/javascript_validando_formularios/validando.html

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



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



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.

upload de vários arquivos com php 5

Documents