Validação Automatica de Formulario

By Wenderson Lisardo

Nesse artigo vou falar sobre um tema bem interessante Validação de Formulários, é uma coisa muito comum, mas que leva um tempinho considerável.

Vou mostrar um jeito no qual você não vai precisar ter quase nenhum trabalho, basta mudar um parâmetro. Mesmo tendo vários artigos na internet abordando o mesmo assunto, resolvi fazer mais um por que nunca vi um com um código parecido com esse.

Primeiro passo.

Nós vamos trabalhar com dois arquivos sendo um o javaScript.js e o outro o nosso formulário chamado aqui de formulario.htm.

javaScript.js

Você deve saber que nesse arquivo vai estar todo o código do javaScript e que ele não muda não importando qual é o formulário, abaixo segue o código comentado:

//aqui é a declaração da função ela vai receber como parâmetro um array contendo
//todos os objetos do formulário
function validaForm (formulario)
{

//aqui já é a estrutura de repetição responsável pela varredura de todos os objetos
//contidos no formulário, é bom ressaltar 2 pontos importantes aqui, primeiro que
//a varredura passa por todos os objetos do formulário não importando qual seu
//tipo como, por exemplo, “submits”, password, textarea e etc. e o outro ponto
//importante de ressaltar é que o “formulario.length-1” é usado porque o array
//começa do 0 sendo o i a variável de controle do índice.
 for(i=0;i<=formulario.length-1;i++)
 {

	//Como já foi dito antes o “for” acima passa por todos os objetos do
	// formulário, então para economizar processamento e também para
	// evitar possíveis erros é necessário esse “if” verificando o tipo do objeto,
	// note que acessamos os objetos com a variável passada por parâmetro
	// usando como um array desse jeito: formulario[i] isso é a mesma coisa
	//de chamar o objeto pelo nome, então nós temos acesso a todas as
	// propriedades desse objeto uso então a propriedade type que retorma
	// o tipo do objeto em uso.

   if ((formulario[i].type=="textarea")||(formulario[i].type=="file")||(formulario[i].type=="hidden")||(formulario[i].type=="text")||(formulario[i].type=="password"))
   {

	//Agora começa a interação com o formulário, mas a frente você vai entender
	// melhor esse “if”, ele serve para ver se a propriedade “wmsg” é diferente
	//  de vazio porque se for é porque você disse que esse campo é obrigatório,
	//  sendo que é nessa propriedade aonde é guardado a mensagem que vai
	// aparecer caso o campo esteja vazio.

		if ((formulario[i].getAttribute('wmsg')!="")&&(formulario[i].getAttribute('wmsg')!=undefined))
		{

			//Outra propriedade que você vai usar é a “email” nela você fala se no objeto
			// além de ser obrigatório ainda tem que ter uma validação para um campo do
			// tipo email essa validação é uma validação básica procurando” @ e” .” no
			// email. E o “try catch” serve para não aparecer mensagem de erro pois não
			//  é possível dar um” focus” no campo do tipo “hidden”
			// o return false diz q ocorreu um erro e os dados não devem ser enviados ainda

			if (formulario[i].getAttribute('email')=="sim"){
				 if((formulario[i].value=="")||(formulario[i].value.indexOf('@')==-1)
				  ||(formulario[i].value.indexOf('.')==-1)){
					 alert(formulario[i].getAttribute('wmsg'));
					  try{
							formulario[i].focus();
						 }catch(e){}
					  return false
				 }
			}
			//aqui já é caso não seja um campo do tipo email ai não precisa ter o @ e nem o .
			else
			{
				 if(formulario[i].value=="")
				 {
					alert(formulario[i].getAttribute('wmsg'));
					try
					{
						formulario[i].focus();
					}catch(e){}
				return false
				}
			}
		}
	}
 }
}

Segundo passo
Agora que você já passou pela parte mais difícil dessa matéria, vamos ao html. Você pode fazer da maneira na qual está acostumado com as diferenças em vermelho.

Na primeira marcação de vermelho é onde adicionamos o javaScript criado no primeiro passo desse artigo, a segunda marcação já é onde chamamos a função criada no java. Observe que o “return” precedido da função é utilizado para travar o envio das informações caso seja constatado que algum campo esteja irregular.

Já a ultima marcação em vermelho é onde está mesmo a grande diferença das maneiras convencionais. Temos duas propriedades novas criadas a “wmsg” e a “email”.

wmsg: é exatamente a mensagem que vai aparecer caso o campo esteja irregular e a segunda serve para verificar se o campo é do tipo e-mail ou não, observe que para ser obrigatório, um campo precisa ter essa propriedade preenchida com alguma mensagem, se essa propriedade ficar vazia significa que o campo não é obrigatório.

email: se essa propriedade estiver marcada como sim significa que o campo é do tipo e-mail e, conseqüentemente, além de ser obrigatório o campo ele ainda precisa conter o “@” e o “.”

<html>
	<head>
		<title>Formulário</title>
		<script src="javaScript.js"></script>
	</head>
	<body>
		<form id="form1" name="form1" method="post" onsubmit="return validaForm(this)" action="">
			Teste de formul&aacute;rio
			<br />
			<br />

		<input type="text" wmsg="Campo Text Em Branco" name="textfield" />
		<br />
		<br />
		<input type="text" wmsg="Campo Text Em Branco verificando email" email="sim" name="textfield3" />
		<br />
		<br />
		<input type="password" wmsg="Campo password Em Branco" name="textfield2" />
		<br />
		<br />
		<input type="file" name="file" wmsg="Campo file Em Branco" />
		<br />
		<br />
		<textarea name="textarea" wmsg="Campo textarea Em Branco"></textarea>
		<input type="hidden" name="hiddenField" wmsg="Campo hidden Em Branco" />

		<input type="submit" name="Submit" value="Submit" />
		</form>
	</body>
</html>

Espero que tenha gostado dessa dica e aprendido algo com esse artigo. Estou à disposição para qualquer dúvida, sugestão ou reclamação.

Obs. Esse artigo eu já havia publicado no imasters, apenas arrumei para poder funcionar no Firefox também.

Os fontes podem ser baixados nos links abaixo:
JavaScript
HTML

Postagens Relacionadas:

Nenhuma postagem encontrada