Reconhecendo array de campos do formulário1

[Carlos Rocha]

Bom, vou ser mais específico na dúvida:

JavaScript

<script>
function valida_cad_empresa2(form,string_array)
{
 
    var servico = new Object();
servico = string_array.split('|');
 
alert(document.getElementsByName('nomeTipo').length);
return false;
for (var key in servico)
{
 for (key2 in document.getElementsByName('nomeTipo['+key+']').item(0))
 {
 if (document.getElementsByName('nomeTipo['+key+']['+key2+']').item(0).value =="")
 {
 alert("Preencha Nome do Tipo: campo obrigatório!");
 document.getElementsByName('nomeTipo['+key+']['+key2+']').item(0).focus();
 return (false);
 }  
 }
 
}
 
form.submit();
 
}
</script>

HTML

<form action="?acao=gravatipos&ultimo_id=177" method="post" name="gravatipos" id="gravatipos">
        <h2><br />Cadastro de empresas (Passo 2/2)</h2><br />
 <label>Tipos para o servi&ccedil;o: Passeio</label><br />  <fieldset>
    <legend>Tipo</legend>
    <label class='passo2'>Nome Tipo: </label><input type='text' id='nomeTipo0' name='nomeTipo[3][0]'><br /> 
    <label class='passo2'>Qtde Pessoas: </label><input type='text' onKeyPress="BloqueiaLetras();" id='qtdePessoas0' name='qtdePessoas[3][0]'><br />
    <label class='passo2'>Preço: </label><input type='text' class="real" id='preco0' name='preco[3][0]'><br />
    <label class='passo2'>Descrição: </label>
    <textarea id='descricao0' name='descricao[3][0]' cols='40' rows='5'></textarea><br />
  </fieldset>
  <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 />  <fieldset>
    <legend>Tipo</legend>
    <label class='passo2'>Nome Tipo: </label><input type='text' id='nomeTipo0' name='nomeTipo[4][0]'><br /> 
    <label class='passo2'>Qtde Pessoas: </label><input type='text' onKeyPress="BloqueiaLetras();" id='qtdePessoas0' name='qtdePessoas[4][0]'><br />
    <label class='passo2'>Preço: </label><input type='text' class="real" id='preco0' name='preco[4][0]'><br />
    <label class='passo2'>Descrição: </label>
    <textarea id='descricao0' name='descricao[4][0]' cols='40' rows='5'></textarea><br />
  </fieldset>
  <div id="div4">    
    <input type="button" value="Adicionar campos" onClick="addCampos(this.parentNode.id, 4)" />
  </div><br><br>
           
 
<br><br><input type="button" value="Cadastrar" onClick="valida_cad_empresa2(this.form,'3|4')" />
</form>

Observe a função:

No form, eu tenho um campo

nomeTipo[3][0]

Se eu pesquisar pelo:

document.getElementsByName('nomeTipo').length

Acho 0 como retorno

Mas, se eu buscar por

document.getElementsByName('nomeTipo[3][0]').length

Aí acho 1.

Parece que getElementsByName age como se fosse getElementById.

O que há de errado?

JavaScript não reconhece um array de campos de formulário?

Será isso?

Se for, alguma saída?

Editado Janeiro 28, 2014 por Carlos Rocha

[Kyl3]

A função getElementsByName retorna um array de todos os elementos encontrados com o search. [0] será o primeiro elemento (contando a ordem disposta na página), [1] o segundo, e assim por diante.

Você não tem nenhum elemento com o "name" = "nomeTipo", então é esperável que o tamanho do array retornado (length) seja 0. Já o nomeTipo[3][0] aparece uma vez no código HTML, então retorna 1 de length.

[Carlos Rocha]

Então, como faço para validar em:

nomeTipo[4][0]

Se existe pelo menos um

nomeTipo[]

Criado. Mas usando getElementsByName?

Ou como devo criar os type=texts para validar dessa forma. Uma vez que [4] é o tipo de serviço(existem outros) dái o array. Mas para cada serviço possuo vários tipo, o que justifica o [4][0]

Editado Janeiro 28, 2014 por Carlos Rocha

[Carlos Rocha]

Consegui fazer assim(e funcionou);

function valida_cad_empresa2(form)
{
for (i=0;i<document.gravatipos.elements.length;i++)
{
      if ((document.gravatipos.elements[i].type == 'text') || (document.gravatipos.elements[i].type == 'textarea'))
 {
        if(document.gravatipos.elements[i].value == "")
{
 alert("Campo obrigatório!");
 document.gravatipos.elements[i].focus();
 return (false);
}
 }
}
form.submit();
}

Agora tenho outro problema relacionado;

Este é o HTML modificado

  <fieldset>
    <legend>Tipo</legend>
    <label class='passo2'>Nome Tipo: </label><input type='text' id='nomeTipo[<?php echo $servico;?>][0]' name='nomeTipo[<?php echo $servico;?>][0]'><br /> 
    <label class='passo2'>Qtde Pessoas: </label><input type='text' onKeyPress="BloqueiaLetras();" id='qtdePessoas[<?php echo $servico;?>][0]' name='qtdePessoas[<?php echo $servico;?>][0]'><br />
    <label class='passo2'>Preço: </label><input type='text' class="real" id='preco[<?php echo $servico;?>][0]' name='preco[<?php echo $servico;?>][0]'><br />
    <label class='passo2'>Descrição: </label>
    <textarea id='descricao[<?php echo $servico;?>][0]' name='descricao[<?php echo $servico;?>][0]' cols='40' rows='5'></textarea><br />
  </fieldset>
  <div id="div<?php echo $servico;?>">    
    <input type="button" value="Adicionar campos" onClick="addCampos(this.parentNode.id, <?php echo $servico;?>)" />
  </div><br><br>

Também tenho uma função JS que adiciona novos campos ao form.

Note que no form acima, tenho a função BloqueiaLetra() e um campo e class="real" em outro.

Nos campos que são criados no ato do carregamento do form, ambos, a funçao e a classe funcionam normal. Porém, co respeito aos campos adicionados após o carregamento do form (botão: incluir campo), apenas a funçao funciona, mas a classe não.

Qual será o erro?