[RESOLVIDO] Plugin Validation JQuery - CheckBox

Opa galera!!

Eu estava com um problema para fazer uma validação em um grupo de CheckBoxes com ids iguais mas names diferentes, por padrão como eu uso o Vraptor como MVC, ele pede que ao se criar uma lista de qualquer coisa que se queira passar para uma servlet, nós coloquemos no padrão os names "variavel[0], variavel[1]...", encontrei um monte de coisas sobre, mas todas as tentativas não deram certo, então enquanto eu testava acabei achando uma solução, com ajuda de uns posts também, de qualquer forma está ai para ajudar quem precise!!!

//Basear nesse HTML

<form id="formulario">
		<center>
			<div class="inline"><input type="checkbox" id="cias" comp="1" name="cias[0]">Check1</div>
			<div class="inline"><input type="checkbox" id="cias" comp="1" name="cias[1]">Check2</div>
			<div class="inline"><input type="checkbox" id="cias" comp="1" name="cias[2]">Check3</div>
			<div class="inline"><input type="checkbox" id="cias" comp="1" name="cias[3]">Check4</div>
			<div class="inline"><input type="checkbox" id="cias" comp="1" name="cias[4]">Check5</div>
			<div class="inline"><input type="checkbox" id="cias" comp="1" name="cias[5]">Check6</div>
			<div class="inline"><input type="checkbox" id="cias" comp="1" name="cias[6]">Check7</div>
			<div class="inline"><input type="checkbox" id="cias" comp="1" name="cias[7]">Check8</div>
			<div class="inline"><input type="checkbox" id="cias" comp="1" name="cias[8]">Check9</div>
			<div class="inline"><input type="checkbox" id="cias" comp="1" name="cias[9]">Check10</div>
			<div class="inline"><input type="checkbox" id="cias" comp="1" name="cias[10]">Check11</div>
			<div class="inline"><input type="checkbox" id="cias" comp="1" name="cias[11]">Check12</div>
			<div id="errosCias" style="clear: both;"></div>
		<div>
			<input class="link" type="button" id="checar" value="Incluir todos">
			<input class="link" type="button" id="deschecar" value="Retirar todos">
		</div>
		</center>
</form>

1º) Eu peguei todos os inputs com id “cias” no documento

//pega todos os inputs seguidos da 'div' e do id 'cias'
var companhias = $('div #cias'); // pode ser assim tambem ***   $('input[id="cias"]')   ***

2º) Criei uma lista de String com os names para criar o grupo de companhias
//Ex: “cias[0] cias[1] cias[2]… cias[11]”

//Cria uma string com todos os "names" das companhias separados por espaco
var listaCias = companhias.map(function(){
	return $(this).attr('name');
}).get().join(' ');

3º) Criei um validador para que valide quando nenhum checkbox estiver ticado (pelo menos 1 ticado)

//Valida se ao menos 1 input do grupo foi checado
$.validator.addMethod('comp', function(value, element){
	return $('input[id="cias"]:checked').length>0;
}, "Escolha ao menos uma companhia!");

4º) Criei o validate do formulario

$('#formulario').validate({
        //Cria o grupo da lista de names no validate
	groups: {
		comp: listaCias,
	},
       //Determina o local que ficara o erro de validacao quando ocorrer
	errorPlacement: function(error, element){
		//procura o elemento a fazer a validacao na lista de ids gerada anteriormente
		if((listaCias.indexOf(element.attr('name').toString())>=0)){
			//Caso seja o erro do grupo (comp)
			error.insertAfter('#errosCias');
		}else
			//Caso sejam outros erros
			error.insertAfter(element);
	}
});

Esta parte nao he necessaria, mas pra quem quiser ticar todos os checks e tirar o tick de todos ta aew o código

//Checkar todas as companhias
$('#checar').click(function(){
	$(companhias).attr('checked', true);
	$(companhias).valid(); //Atualiza validacao para esses campos
});

//Retirar o check de todas as companhias
$('#deschecar').click(function(){
	$(companhias).attr('checked', false);
	$(companhias).valid(); //Atualiza validacao para esses campos
});

E isso aew, qualquer duvida, só postar!!!

Topicos relacionados