Criar Web, manuais e recursos para desenvolvimento web
Manuais
Programas
FAQS
Diretório
Comunidade
  Inicio > Manuais > Workshop de Javascript
SEÇÕES
Manuais relacionados
+Workshop de Javascript
Categorias
+Scripts em Javascript

Índice do Manual Workshop de Javascript
+ Efeitos rápidos com Javascript
+ Abertura e configuração de popups com Javascript
+ Acessso por senha Javascript
+ Rollover com Javascript
+ Navegador dinâmico Javascript
+ Navegador desdobrável
+ Navegador desdobrável com frames
+ Texto em movimento na barra de estado
+ Marcar ou desmarcar todos os checkboxes de um formulário com Javascript
+ Desabilitar o menu contextual do navegador com Javascript
+ Relógio em Javascript
+ Scripts diferentes para cada navegador
+ Tamanho dos campos relativo ao navegador
+ Estilos diferentes para cada navegador
+ Tabela de cores com Javascript
+ Sub-menu em outra janela
+ Degradê de cor Javascript
+ Validar inteiro no campo de formulário
+ Exemplos de funcionamento da classe String
+ Exemplo de funcionamento de Date
+ Link aleatório Javascript
+ Geração de números aleatórios Javascript
+ Comprovar se as senhas são iguais
+ Ex. de trabalho com formulários. Calculadora simples
+ Enviar ao navegador a outra página se não tiver Javascript
+ Confirmação de envio de formulário
+ Javascript para se posicionar em um select
+ Inibir um campo texto de formulário com Javascript
+ Camadas com Internet Explorer 5, 6, Netscape 6, 7 e Opera
+ Mostrar e ocultar camadas com IE 5,6 NS 6,7
+ Movimento de Camadas com IE 5,6 NS 6,7
+ Escritura nas Camadas com IE 5, 6, NS 6, 7
+ Como iluminar tabelas, células ou filas
+ Inibir radio button com Javascript
+ Atualizar dois frames com um só link
+ Calcular a idade em Javascript
+ Iluminar formulários com CSS e Javascript
+ Autozoom de texto com Javascript
+ Javascript para evitar que a página se mostre em um frame
+ Elementos de formulário select associados
+ Conta os caracteres escritos em um textarea
+ Passo de parâmetros em HTML com client-side Javascript
+ Moldura dinâmica em Javascript com texto que muda
+ Criação de gráficos de barras com Javascript
+ Jogos em Javascript
+ Cross-Browser. DHTML compatível com todos os navegadores.
+ HTML Area. Editor WYSIWYG
+ Ocultar um e-mail de um link para evitar o spam
+ Função em Javascript para a inserção de datas
+ DHTML Calendar
+ Gerar uma cor aleatória com Javascript
+ A aprendizagem na Internet
+ Menu Dinâmico com Javascript
+ Página que muda aleatoriamente a cor de fundo
+ Script de recarregamento da página com Javascript
+ Mudar a cor às células de uma tabela com Javascript
+ Pop-ups DHTML – OpenPopups
+ Validar a extensão de um arquivo a subir com Javascript
+ Detectar a resolução da tela do usuário com Javascript
+ Esconder a URL de um link na barra de estado
+ Como integrar conteúdo RSS em minha página?
+ Fazer com que um iframe se ajuste à altura de uma janela com Javascript
+ É vantajoso o uso de ParseInt para validar números?
+ Efeito para desabilitar/habilitar o fundo da Página
+ Validar número de checkbox marcados com Javascript
+ Evitar que um textarea supere um número de caracteres permitidos

Descrição dos capítulos

Parceiros
- CSS para Web Design
- S.O.S Designers
- Slackware-Brasil
- Crie seu Web site
- Oficina da Net


Validar número de checkbox marcados com Javascript

Um script em Javascript para validar campos de verificação de formulários, para se assegurar que foi marcado um número máximo de checkbox.


Deixarei aqui umas linhas de minha própria criação de um script Javascript que tive que fazer para comprovar o estado de elementos checkbox ou campos de verificação de formulários.

Trata-se de utilizar os típicos campos de verificação, porém com um limitador de grupo. Pode-se utilizar em loterias de vários resultados, nos futuros testes das auto-escolas com a possibilidade de marcar várias respostas, etc.

Temos uma série de grupos de checkbox e o que queremos fazer é nos assegurar que em cada grupo, de maneira independente, não se tenha marcado mais de um número definido de campos. Por exemplo, temos x grupos de 3 campos de verificação cada um. Se o usuário marca um campo de checkbox de um dos grupos não há problema algum. Se marca 2 campos tampouco há problemas, mas se tenta marcar os três checkbox do grupo Javascript não o permite e mostra uma mensagem de erro.

Podemos ver o exemplo em funcionamento para termos uma idéia mais concreta.

Formulário HTML

Vamos ter um formulário com, neste caso, dois grupos de campos de verificação.

<form action="" method="post" enctype="multipart/form-data" name="formulario" id="formulario">
<table width="76">
<td width='20' valign='top'><input type='checkbox' onclick='validar(formulario.checkbox1,0)' name='checkbox1' value='checkbox1'></td>
<td width='20' valign='top'><input type='checkbox' onclick='validar(formulario.checkbox2,0)' name='checkbox2' value='checkbox2'></td>
<td width='20' valign='top'><input type='checkbox' onclick='validar(formulario.checkbox3,0)' name='checkbox3' value='checkbox3'></td>
<tr>
<td width='20' valign='top'><input type='checkbox' onclick='validar(formulario.checkbox4,1)' name='checkbox4' value='checkbox4'></td>
<td width='20' valign='top'><input type='checkbox' onclick='validar(formulario.checkbox5,1)' name='checkbox5' value='checkbox5'></td>
<td width='20' valign='top'><input type='checkbox' onclick='validar(formulario.checkbox6,1)' name='checkbox6' value='checkbox6'></td>
</tr>
</table>
</form>


Como podemos ver, o nome de cada campo é distinto. E ademais temos uma função que se executa quando se clica sobre o checkbox (evento onclick), que será a encarregada de realizar a verificação.

Função para verificar checkbox por grupos

Vejamos o código Javascript que utilizamos para realizar a comprovação de que vários checkbox não possam estar clicados ao mesmo tempo no mesmo grupo.

Primeiro, definimos um par de variáveis globais, que utilizaremos para definir os campos máximos que podem estar marcados ao mesmo tempo, e outra para levar a conta dos campos que há marcados em cada grupo.

//Número máximo de campos marcados por cada fila
var maxi=2;

//O contador é um array de forma que cada posição do array é uma linha do formulário
var contador=new Array(0,0);


Agora a função que realizará a conta de campos e informará de uma possível falha na comprovação, se se clicam mais que os que se deve.

function validar(check,grupo) {
   //Comprovo se o campo está marcado
   if (check.checked==true){
       //está marcado, então aumento em um o contador do grupo
       contador[grupo]++;
       //comprovo se o contador chegou ao máximo permitido
       if (contador[grupo]>maxi) {
          //se tiver chegado ao máximo, mostro mensagem de erro
          alert('Não se pode escolher mais de '+maxi+' campos ao mesmo tempo.');
          //desmarco o campo, porque não se pode permitir marcar
          check.checked=false;
          //diminuo uma unidade ao contador de grupo, porque desmarquei um campo
          contador[grupo]--;
       }
   }else {
       //se o campo não estiver marcado, diminuo um ao contador de grupo
       contador[grupo]--;
   }
}


A função recebe dois parâmetros. Primeiro, o campo de formulário checkbox que se clicou. Logo, o número de grupo ao que pertence esse checkbox.

Necessita-se o checkbox para conhecer seu estado e para mudá-lo caso seja necessário. O grupo o utiliza para saber a que contador deve se referir, para saber o número de campos que há clicados nesse grupo.

A função está comentada para facilitar sua leitura e compreensão.

O exemplo em funcionamento pode-se executar em uma janela à parte.

Autoria e outras referências sobre este artigo

Manuais relacionados com este artigo
Dentro de Workshop de Javascript

Categorias relacionadas
Através das categorias do nosso diretório podem ser encontrados outros tipos de recursos relacionados com este artigo:
+ Entrar em Scripts em Javascript


Comentários dos visitantes
Os comentários dos visitantes são para ampliar a informação do artigo. Todos podem participar.
Acrescentar um comentário do artigo Acrescentar um comentário do artigo



Sobre nós | Copyright | Anuncie | Entrar em contato <criarweb>

Hospedado por Hostnet Hospedagem de Sites