[Resolvido] Javascript para ao pular id sequencial

dinohills · Novembro 1, 2011

Boa tarde a todos,

estou criando uma validação em javascript para não deixar que a pessoa digite ip duplicado ou que o ip digitado saia fora do padrão que eu defini, que no caso é (192.168.1.xxx).

Até ai está tudo funcionando!!

Na minha tabela eu coloquei opção para inserir e deletar as linhas, e para cada linha inserida cada input recebe uma id que no caso são:

ip-x

mac-x

nome-x

O problema é quando eu mando excluir uma linha que está entre 2 números ou seja:

em uma tabela com 5 linhas se eu mandar excluir a linha 4 a minha verificação para na linha 3 deixando a linha 5 de fora.

Aqui está um exemplo real do meu problema:

<html>
   <head>
       <title></title>
       <script type="text/javascript">
           function adiciona(){            
               var tbl = document.getElementById("tabela");            
               var novaLinha = tbl.insertRow(-1);
               var novaCelula;
               var id = tbl.rows.length -2;

               novaCelula = novaLinha.insertCell(0);                
               novaCelula.innerHTML = "\n<input type='text' name='IP[]' id='ip-"+id+"' maxlength='13' size='15' onkeydown='mascara(this,ip)' onkeyup='mascara(this,ip)' />";

               novaCelula = novaLinha.insertCell(1);                        
               novaCelula.innerHTML = "\n<input type='text' name='MAC[]' id='mac-"+id+"' maxlength='17' size='15' />";

               novaCelula = novaLinha.insertCell(2);                      
               novaCelula.innerHTML = "\n<input type='text' name='NOME[]' id='nome-"+id+"' maxlength='25' size='20' />";

               novaCelula = novaLinha.insertCell(3);                        
               novaCelula.innerHTML = "\n<input type='button' value='Deletar' onclick='deleteRow(this.parentNode.parentNode.rowIndex)'>";
           }
           function deleteRow(valor){
               document.getElementById('tabela').deleteRow(valor)
           }
           function valida_tudo(){
               var padrão = /^(192)\.(168)\.(1)\./;
               var padrao2 = /^(\d{1,3})\.(\d{1,3})\.(\d{1})\.(\d{1,3})/;                
               var nome_ip = document.getElementsByName("IP[]");                

               for (i = 0; i < nome_ip.length; i++){
                   var id_ip = document.getElementById("ip-"+i);
                   var ip_array = id_ip.value.match(padrao2);

                   if ( padrão.test(id_ip.value) == false || ip_array[4] > 254 || ip_array[4] == 0){
                       alert("Este ip: "+id_ip.value+" é inválido !!");
                       return false;
                   }                    
                   for (n = 0; n < i; n++){
                       var id_ip2 = document.getElementById("ip-"+n);
                       if (id_ip.value == id_ip2.value){
                           alert("Ip's iguais não são permitidos !!");
                           return false;
                       }
                   }
               }
           }
           function mascara(el,masc){
               el.value=masc(el.value);
           }                      
           function ip(d){
               d=d.replace(/\D/g,""); //permite somente numeros
               d=d.replace (/\s/g,""); // remove espaço
               d=d.replace(/^(\d{3})(\d)/,"$1.$2");
               d=d.replace(/^(\d{3})\.(\d{3})(\d)/,"$1.$2.$3");
               d=d.replace(/^(\d{3})\.(\d{3})\.(\d{1})(\d)/,"$1.$2.$3.$4");
               return d;
           }                
       </script>
   </head>
   <body>
       <form action="" method="post" >

           <table border="1" cellpadding="5" cellspacing="0" id="tabela">
               <thead>
                   <tr>
                       <th>IP</th>
                       <th>MAC ADDRESS</th>
                       <th>Nome</th>                        
                   </tr>
               </thead>

               <tbody>
                   <tr>
                      <td><input type=text name="IP[]"   id="ip-0"   size="15"  maxlength="13" onkeydown="mascara(this, ip)" onkeyup="mascara(this, ip)" value="192.168.1.1" /></td>
                       <td><input type=text name="MAC[]"  id="mac-0"  size="15"  maxlength="17" value="11-11-11-11-11-11" /></td>
                       <td><input type=text name="NOME[]" id="nome-0" size="20"  maxlength="25" value="PC1" /></td>
                       <td><input type="button" value="Deletar" id="0" onclick="deleteRow(this.parentNode.parentNode.rowIndex)" /></td>
                   </tr>
                   <tr>
                      <td><input type=text name="IP[]"   id="ip-1"   size="15"  maxlength="13" onkeydown="mascara(this, ip)" onkeyup="mascara(this, ip)" value="192.168.1.2" /></td>
                       <td><input type=text name="MAC[]"  id="mac-1"  size="15"  maxlength="17" value="22-22-22-22-22-22" /></td>
                       <td><input type=text name="NOME[]" id="nome-1" size="20"  maxlength="25" value="PC2" /></td>
                       <td><input type="button" value="Deletar" id="1" onclick="deleteRow(this.parentNode.parentNode.rowIndex)" /></td>
                   </tr>
                   <tr>
                      <td><input type=text name="IP[]"   id="ip-2"   size="15"  maxlength="13" onkeydown="mascara(this, ip)" onkeyup="mascara(this, ip)" value="192.168.1.3" /></td>
                       <td><input type=text name="MAC[]"  id="mac-2"  size="15"  maxlength="17" value="33-33-33-33-33-33" /></td>
                       <td><input type=text name="NOME[]" id="nome-2" size="20"  maxlength="25" value="PC3" /></td>
                       <td><input type="button" value="Deletar" id="2" onclick="deleteRow(this.parentNode.parentNode.rowIndex)" /></td>
                   </tr>
                   <tr>
                      <td><input type=text name="IP[]"   id="ip-3"   size="15"  maxlength="13" onkeydown="mascara(this, ip)" onkeyup="mascara(this, ip)" value="192.168.1.4" /></td>
                       <td><input type=text name="MAC[]"  id="mac-3"  size="15"  maxlength="17" value="44-44-44-44-44-44" /></td>
                       <td><input type=text name="NOME[]" id="nome-3" size="20"  maxlength="25" value="PC4" /></td>
                       <td><input type="button" value="Deletar" id="3" onclick="deleteRow(this.parentNode.parentNode.rowIndex)" /></td>
                   </tr>                    
               </tbody>
           </table>            
           <input type="button" value="Inserir" onclick="adiciona();" >
           <input type="button" value="Validar" onclick="valida_tudo();" >
       </form>
   </body>
</html>

Gostaria de saber se tem algum jeito de fazer o script continuar mesmo se uma id está faltando.

Se alguém tiver uma dica ou souber de algo poste ai por favor.

Obrigado!!

William Bruno · Novembro 1, 2011

a melhor forma é não trabalhar com IDs, mas sim com grupo de campos.

usando o getElementsByTagName('input')

dinohills · Novembro 1, 2011

a melhor forma é não trabalhar com IDs, mas sim com grupo de campos.

usando o getElementsByTagName('input')

Então, mas eu preciso submeter cada input um tipo de validação diferente. Por isso eu estou pegando cada campo pela id.

William Bruno · Novembro 1, 2011

ai você compara o name de cada input, entendeu?

não precisa do ID.

dinohills · Novembro 1, 2011

ai você compara o name de cada input, entendeu?

não precisa do ID.

Uia deu certo !!!! Fiz o que você disse e deu certo eheheheh resposta tava na cara e não percebi !!!!

Fico assim o javascript:

function valida_tudo(){
               var padrao = /^(192)\.(168)\.(1)\./;
               var padrao2 = /^(\d{1,3})\.(\d{1,3})\.(\d{1})\.(\d{1,3})/;                
               var nome_ip = document.getElementsByName("IP[]");                
               var nome_ip2 = document.getElementsByName("IP[]");                

               for (i = 0; i < nome_ip.length; i++){                                        
                   var ip_array = nome_ip[i].value.match(padrao2); 

                   if ( padrao.test(nome_ip[i].value) == false || ip_array[4] > 254 || ip_array[4] == 0 ){
                       alert("Este ip: "+nome_ip[i].value+" é inválido !!");
                       return false;
                   }                    
                   for (n = 0; n < i; n++){                        
                       if (nome_ip[i].value == nome_ip2[n].value){
                           alert("Ip's iguais não são permitidos !!");
                           return false;
                       }
                   }
               }
           }

Você pode me ajuda em só mais uma coisa ?

Eu vo permitir que o ip seja nulo nela tabela, ai se eu usar if (nome_ip == "" ) com return true da certo, mas se eu inserir um campo abaixo dele o script nao verifica !!!

William Bruno · Novembro 1, 2011

pq o return para o fluxo, e te tira do contexto da função.

ou você coloca a verificação do IP no final, ou nem verifica ue.. se pode ser nulo, não tem oq validar.

dinohills · Novembro 1, 2011

Sim, mas é que o problema que ai ele não vai passar na verificação da expressão regular então eu teria que mandar ele verificar antes!

dinohills · Novembro 1, 2011

Bom desisti do fato de manter o campo do IP nulo. Pode fechar o tópico !! Obrigado pela ajuda :joia:

Uma ultima dúvida, porque quando eu estava usando id o javascript não continuava a verificar quando faltava uma id na sequencia ??

William Bruno · Novembro 1, 2011

pq dava erro, e quebrava a execução do script.

aperte Ctrl+Shift+J e acompanhe os erros. Alguns ERROS impedem que o script continue.

Tentar usar um ID inexistente é um desses.

Leitura:

http://wbruno.com.br/blog/2011/03/31/como-debugar-javascript-firefox-erros-comuns/

dinohills · Novembro 1, 2011

Ah sim, eu estava usando esse console pra acompanhar o que acontecia !! Não no firefox mais antigo, mas na versão 7 eu usei o "Console da Web" Ctrl+Shift+K !

E no caso ele me retornava o valor da id como null quando pulava.

Bom, mas agora já está resolvido !! Obrigado !!

Arquivado

[Resolvido] Javascript para ao pular id sequencial

Recommended Posts

dinohills 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

dinohills 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

dinohills 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

dinohills 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

dinohills 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

dinohills 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante