|
|
|
||||||||||||||||||||||
|
|||||||||||||||||||||||
|
|||||||||||||||||||||||
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 JavascriptUm 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 Dentro deste artigo: + 1 manual relacionado + 1 categoria relacionada
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 JavascriptComentários dos visitantes Os comentários dos visitantes são para ampliar a informação do artigo. Todos podem participar.
|
| Sobre nós | Copyright | Anuncie | Entrar em contato | <criarweb> |