[Resolvido] função js valida tudo

[Carcleo 4]

Olá pessoal.

 

 

Bom Dia

 

Gostaria de desenvolver uma função em JavaScript crossbrowser que valide todo e qualquer form.

 

Alguem me ajuda a desenvolver?

 

à medida que as ideias forem aparecendo, por favor postem aqui.

 

A idéia seria mais ou menos assim:

 

function validaforms (quantoscamposnoform, nomeform, nomesdoscampos:array)
{
for (i=1;i<=quantoscamposnoform;i++)
{
		if (document.nomeform.nomesdoscampos[1].value == "")
	{
		alert("Preencha Campo 1: campo obrigatório !");
		document.nomeform.nomesdoscampos[1].focus();
		return (false);
	}

}

}

[William Bruno 1501]

você não precisa desse argumento: quantoscamposnoform

 

veja sobre o método getElementsByTagName()

 

rodando um desse apartir de um objeto form, você receberá todos os elementos daquele form com aquele nome de tag.

[Ted k' 126]

Ou substituir ele por uma contagem interna de quantos forms tem!

[Carcleo 4]

Dêem uma ideia de como começar por favor!

[William Bruno 1501]

Pesquisou sobre o método que eu citei ? ele é o começo.

http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html

 

releia a minha frase, a lógica que você precisa está nela.

[Carcleo 4]

Boa tarde

em js ou ajax, como eu sei quais os tipos de campos temn em um form?

Tipo:

No form cadastro, tem dois type=text, um select e um radio button

iso na sequencia, tipo, o primeiro é um text, o segundo é um radio buttom o trernceiro é um select.....

[William Bruno 1501]

em js ou ajax,

ajax não tem nada a ver com isso. Primeiro entenda oq ajax não é:

http://wbruno.com.br/blog/2011/04/08/o-que-e-ajax-e-o-que-nao-e/

 

como eu sei quais os tipos de campos temn em um form?

só existem poucos tipos possíveis para você se preocupar:

input (text, checkbox, radio), select e textarea

 

 

 

o primeiro é um text, o segundo é um radio buttom o trernceiro é um select.....

não se preocupe com a ordem. Tanto faz a ordem que eles aparecem.

[Carcleo 4]

Opa Bruno.

 

Valeu pela resposta, mas eu preciso saber quais são os campos do form para validar.

 

Tipo:

O form tem 6 campos,

 

o campos[0] é um text area e seu name é tal,

o campos[1], é um select e seu name é tal,

 

o campos {i de laço for para determinar quantos campos tem o form e jogar eles em um array de elementos}

 

é isso que eu precido mano

[William Bruno 1501]

use o atributo para saber.

 

olhe:

<input type="text" name="email" id="t" />

 

no js:

document.getElementById('t').name;

vai te retornar email entendeu ?

 

usei o getElementById, mas poderia ser qq coisa, até a posição do getElementsByTagName()..

[Carcleo 4]

Ok.

 

Tô quase lá.;

 

Tem como eu saber, através do document.getElementById(), quais os ids dos campos de um form?

 

Tipo form=document.getElementById('nomedoform');

 

form.(ids_dos_campos)

E depois saber se eles precisam ou não de verificação?

 

Com essa informção acho que já da para eu fazer resto.

[William Bruno 1501]

var todos_os_inputs = document.getElementById('nomedoform').getElementsByTagName('input');

 

ai a variavel todos_os_inputs será um array.

itere sobre esse array e faça oq você precisar. (isso estou te dizendo desde o meu primeiro post)

[Carcleo 4]

Entendi agora.

 

Mas agora surgiu outros dois problemas:

 

1) Desta forma só terá como validar inputs. Selects não conseguirei. Tem como validar todo tipo de campo?

 

2) Desta forma eu terei que validar todo e qualquer campo.

 

Teria como eu filtrar?

 

Tipo, uma verificação se o campo precisará de ser validado ou não?

 

 

De repente, quem sabe, uma informaçao adicional no input dizendo e ele terá que ser validado ou não.

[William Bruno 1501]

tem sim, você pode incluir uma class "validar" nos inputs q precisarem ser validados.

 

teste os que tem isso como parte do atributo .className e valide eles, ignorando os q não tiverem isso.

[Carcleo 4]

Entendi a logica.

 

Vou descançar agora.

 

Amanha tento fazer e posto aqui como ficou.

 

Por enquanto muito obrigado e por favor não feiche o tópico.

 

É que podem surgir mais duvidas

 

Bom Dia programmers and Designers an Curious (Com eu) hehe

 

 

Depois de muita coisa de pensamento profundo dentro da minha cabeça, cheguei a essa função valida quase tudo.

 

Preciso da ajuda de vocês para implementar mais a função:

<form action="#" method="post" id="meuform" name="meuform">
 <input name="id" name="nome" type="text"  value="" textovalida="o nome" validate="true" /><br />
 <input id="idade" name="idade" type="text"  value=""  maxlength="100" textovalida="a idade" validate="false"><br />
 <select type="select" id="cidade" name="cidade" textovalida="a cidade" validate="true" /><br />
  <option value="">ESCOLHA</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
 </select><br />
 <input type="button" value="Enviar" onclick="validate('meuform')" validate="false" />
</form>


<script>
// JavaScript Document
function validate(form) 
{ 
   formulario    = document.getElementById(form);
   quantoscampos = formulario.elements.length;

   for (var i = 0; i < quantoscampos; i++) 
{ 
       var campos = formulario.elements[i]; 

       if (  
	     (campos.getAttribute("type")=="text")     ||
		 (campos.getAttribute("type")=="password")
		)    
		{  completar="Preencha"; }
       if ( 
	     (campos.getAttribute("type")=="select")   || 
		 (campos.getAttribute("type")=="radio")    ||
		 (campos.getAttribute("type")=="checkbox") ||
		 (campos.getAttribute("type")=="file")
		) 
		{ completar="Selecione"; }


	if (campos.getAttribute("validate") == "true")
	{       
		if (campos.value == "")
		{                
			 alert(completar+" "+campos.getAttribute("textovalida")+": Campo Obrigatório");
			 campos.focus();
			 return false;			 
		 } 
        } 
}
   formulario.submit();
}
</script>

 

Bom pessoal,

 

Estou fazendo progresso:

 

Estou dentro de uma pagina js: valida_tudo.js;

 

Dentro dela, tem a importação de outro arquivo js: valida_email.js.

document.write("<script type='text/javascript' src='valida_email.js'></script>");

Acontece que, quando a função valida_EMAIL(), que esta dentro do arquivo valida_email.js é chamada, toda ele funciona direito, exceto o comando return false e o focus.

 

Qual é o erro?

 

// JavaScript Document

function valida_EMAIL(campo)
{
	arroba = campo.value.indexOf("@",1);
	ponto =  campo.value.indexOf(".",arroba);

       if(arroba==-1 || ponto==-1 || ponto+3 > campo.value.length)
	{
		alert("Teu e-mail foi digitado incorretamente. Verifique padrão: teuemail@teuprovedor.finalizacao");
		campo.focus();		
		return (false);
	}
	return (true);
}

 

ainda não consegui

[Carcleo 4]

Pessoal.

olha a situação que estou.

 

Estou dentro de um arquivo js e, faço um if.

 

Caso esse if aconteça, eu chamo uma função que esta dentro de outro arquivo js que é chamado antes de chamar a função.

 

Mas, esta dando que a função, no arquvo importado, não esta recebendo o valor.

 

Onde esta o erro?

if (campos.id == "email") 
{ 
 /*document.write("<script type='text/javascript' src='valida_email.js'></script>");*/
 src='valida_email.js';
 valida_email(campos); 
} 

[William Bruno 1501]

não faz sentido esse document.write no meio do script.

 

de onde vem a variavel campos ?

pra q esse src ?

[Carcleo 4]

tanto o document.write quanto o src, são tentativas de importar o conteudo da pagina valida_email.js para dentro do código.

 

detalhe:

 

Se eu colocar o document.write no inicio da pagina

document.write("<script type='text/javascript' src='valida_email.js'></script>");
function validate(form) 
{ 
   formulario    = document.getElementById(form);
   quantoscampos = formulario.elements.length;

   for (var i = 0; i < quantoscampos; i++) 
{ 
       var campos = formulario.elements[i]; 

........

e não na parte do código que contem o if,

else if (campos.id == "email") 
{ 
 document.write("<script type='text/javascript' src='valida_email.js'></script>");
 valida_email(campos); 
} 

aí da certo, dispara o alert quando o email não é digitado corretamente mas não para no focus nem faz o return (false);

No caso de dentro do if, diz que a função valida_email(campos) não esta definida, só que, como dito no inicio, se eu chamar o outro js do inicio da pagina a função ganha definição.

http://www.carcleo.com/aa.zip

Estou colocando o codigo aqui para download

[William Bruno 1501]

tanto o document.write quanto o src, são tentativas de importar o conteudo da pagina valida_email.js para dentro do código.

faça de outra forma, e não com o document.write

 

Por exemplo, assim:

http://wbruno.com.br/blog/2011/05/24/so-carregar-scripts-js-se-houver-suporte-js/

[Carcleo 4]

não estou sabendo como fazer.

 

No inicio do meu script js fiz assim:

// JavaScript Document
function load_script( head, path )
{  
  var script = document.createElement('script'); script.src = path;  
  head.appendChild( script );  
}  
(
 function( head )
 {  
       load_script( head, 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' );  
       load_script( head, 'valida_email.js' );  
 }
)
( 
 document.getElementsByTagName('head')[0] 
);  


function validate(form) 
{ 
   formulario    = document.getElementById(form);
   quantoscampos = formulario.elements.length;

   for (var i = 0; i < quantoscampos; i++) 
{ 
       var campos = formulario.elements[i]; 

No if simplesmente fiz a chamada da função que esta em valida_email.js

else if (campos.id == "email") 
{ 
  valida_email(campos); 
} 

Funcionou da mesma forma que se eu tivesse colocado:

 

document.write("<script type='text/javascript' src='valida_email.js'></script>");

 

No lugar do teu código.

 

Ou seja:

 

Executa a função

 

valida_email(campos);

 

normalmente, porem não executa nem o focus nem o return false;

 

O que fazer?

 

Até mesmo se eu fizer assim:

else if (campos.id == "email") 
{ 
  function valida_email(campo)  
 {
	arroba = campo.value.indexOf("@",1);
	ponto =  campo.value.indexOf(".",arroba);

       if(arroba==-1 || ponto==-1 || ponto+3 > campo.value.length)
	{
		alert("Teu e-mail foi digitado incorretamente. Verifique padrão: teuemail@teuprovedor.finalizacao");
		campo.focus();		
		return (false);
	}
	return (true);
 }

 valida_email(campos); 
} 

Da no mesmo.

 

Voce fez o download do meu codigo?

[William Bruno 1501]

normalmente, porem não executa nem o focus nem o return false;

 

O que fazer?

olhar exclusivamente para o focus() e para o return false;

 

o problema agora não é mais a importação do arquivo, mas sim somente essas 2 rotinas.

Olhe para elas e veja o motivo de estar falhando.

 

 

você precisa saber para onde olhar, se não não vai resolver nunca.