Validação de campos criados via função

[Carlos Rocha]

Olá amigos. Bom dia!

Tenho uma função que cria ( e cria mesmo) um bloco de campos.

Antes disso, para cada bloco, eu crio com php blocos.

PHP:

<?php     
         $contador2=0;
$string_array = implode('|', $_POST["servico"]);
foreach($_POST["servico"] as $servico)
{
 $nomeServicoString="SELECT nome FROM servicos WHERE id=".$servico; 
 $nomeServicoQuery=$conexao->Query($nomeServicoString);
 list($servicoNome)=$nomeServicoQuery->fetch_row();
 echo " <label>Tipos para o servi&ccedil;o: ".$servicoNome."</label><br />";
?>
    <div id="div<?php echo $servico;?>">
    
    <input type="button" value="Adicionar campos" onClick="addCampos(this.parentNode.id, <?php echo $servico;?>)">
    </div>
    <br><br>
           
<?php 
          $contador2++;
}
?>

Nesse php ele cria div's pais para que, em cada div pai, possam ser criados, blocos de type='text'.

Essa parte esta Ok.

Porem, estes blocos estão dentro de um form que precisa ser validado antes de ser enviado.

E é ai que morro o problema.

A função gera os campos dinamicamente. Mas o JavScript parece que não enxerga eles.

Para a função de validação, eu passo um array php transformado em string como parâmetro.

Após a função receber essa função, ele re-transforma essa string em array js.

function valida_cad_empresa2(form,string_array)
{
    var servico = new Object();
servico = string_array.split('|');
 
......
for (var key in servico)
{
 
 if (document.getElementsByTagName('nomeTipo'+[servico[key]]).length==0)
 {
 addCampos('div'+servico[key], servico[key]);
 if(key==servico.length-1) 
 {
 alert("Você deve cadastrar pelo menos 1 tipo para cada serviço selecionado na etapa anterior!");
 return (false);
 }
 }
 else
 { 
          for (var key2 in servico[servico[key]])
 {
if (document.getElementsByTagName('nomeTipo')[servico[servico[key]]][servico[servico[key]][servico[servico[key]][servico[servico[key][key2]]]]] =="")
{
alert("Preencha Nome do Tipo: campo obrigatório!");
document.getElementsByTagName('nomeTipo')[servico[servico[key]]][servico[servico[key]][servico[servico[key]][servico[servico[key][key2]]]]].focus();
return (false);
}
 }
  } 
}
 
form.submit();
 
}

Acontece, que a função valida que o primeiro campo nomeTipo de uma das div's pais não existe e dispara a função de criá-lo mas após criá-lo, ele continuando encontrando ele como não criado.

Porem me ajudar?

Podem visualizar o que estou falando em:

http://www.dinamicaimoveis.com.br/morrodesaopaulo.inf.br/cadastrar.php?acao=form

Podem ficar à vontade para testar e criar empresas fictisseas com qualquer nome

Editado Janeiro 22, 2014 por Carlos Rocha

[fiote]

A primeira form funciona de boa.

Na segunda, ao clicar em "Adicionar campos", tenho o seguinte erro:

Uncaught ReferenceError: addCampos is not defined

Editado Janeiro 22, 2014 por fiote

[Carlos Rocha]

Talvez eu não esteja sabendo é validar corretamente.

A iéia é saber se dentro da div exite uma textbox com os valores passados por parametro:

if (document.getElementsByTagName('nomeTipo'+[servico[key]]).length==0)

o nome do campo esta sendo montado corretamente.

Exemplo: nomeTipo[3][1].

Mas uma vez que ele ainda não tenha sido criado, ele vai e chama a função que cria ele. Porem, quando submetido novamente diz que não foi criado: .lenght==0.

Não sereia o caso de mudar a vereificação de .length para se ele existe? Se sim, como saber que o campo existe?

document.getElementsByTagName('nomeTipo'+[servico[key]]) = Existe?

[Carlos Rocha]

Ta quase tudo certo. Só uma coisa esta dando errado.

 campo = document.getElementsByTagName('nomeTipo['+servico[key]+']').length;
 alert ('nomeTipo['+servico[key]+']');
 if (campo==0)

A principio não tenho campo algum no form.

Porem, quando tento enviar o form, o JS valida a quantidade de campos com name =nomeTipo (há varios campos nomeTipo).

Acontece que a geração desses campos nome tipo são rodados dentro de um for. Logo teremos;

nomeTipo[i].

E, para cada

nomeTipo[i]

desses, podemos ter

nomeTipo[i][j]

campos. .

Logo, a dúvida é saber se o primeiro

nomeTipo[i]

já foi criado. Senão, cria ele.

Essa parte esta sendo feita beleza.

Então,Temos pelo menos

nomeTipo[i][0]

Logo,

nomeTipo[i].length

é diferente de 0.

Mas quando volto na validação, embora o campo

nomeTipo[i][0]

esta lá criado, a função acha

nomeTipo[i].length ==0

.

O que fazer?

Editado Janeiro 22, 2014 por Carlos Rocha

[Carlos Rocha]

Podem me ajudar?

Tentei assim:

campo = document.getElementsByTagName('nomeTipo['+servico[key]+']');
if(document.querySelector(campo)==null)
{
..
}

Mas esta dando o erro abaixo:

Uncaught SyntaxError: Failed to execute query: '[object NodeList]' is not a valid selector.

Eu tenho alguma dificuldade com Javascript.

Tudo que eu quero saber é se existe o campo no formulário cuja propriedade é

name="nomeTipo[3]"

por exemplo. Esse nomeTipo é um array (do tipo nomeTipo[j]) de campos que serão criados dinamicamente via Javascript

Mas, ainda que esse campo não tenha sido criado, o Javascript me informa que ele esta criado.

Não sei mas o que fazer?

À principio, tudo que eu tenho é:

<label>Tipos para o servi&ccedil;o: Passeio</label><br />    <div id="div3">
    
    <input type="button" value="Adicionar campos" onClick="addCampos(this.parentNode.id, 3)">
    </div>
    <br><br>
           
 <label>Tipos para o servi&ccedil;o: Hospedagem</label><br />    <div id="div4">
    
    <input type="button" value="Adicionar campos" onClick="addCampos(this.parentNode.id, 4)">
    </div>
    <br><br>

De onde ele esta tirando a existência de um:

document.getElementsByTagName('nomeTipo['+servico[key]+']')

??

Seria da função JavaScript que cria os campo mesmo antes de ela ser chamada?

Editado Janeiro 23, 2014 por Carlos Rocha