2

Criei um sistema simples de abas com hide() e show(). Dentro de cada uma dessas abas (listadas dinamicamente), haverá várias checkbox (também listadas dinamicamente).

O usuário não será obrigado a selecionar qualquer opção, mas cada aba terá um maxlength diferente. E é aí que está o problema.

Exemplo:

Primeira aba: maxlength = 4 Segunda aba: maxlength = 1

Supondo que o usuário selecionou quatro checkboxes na primeira aba, quando ele vai para a segunda e seleciona um checkbox, o sistema não permite que eu avance para a terceira, porque é como se o usuário tivesse selecionado 5, ou seja, além do limite.

Eu estou pegando o valor máximo permitido de um input hidden, mas por algum motivo ele só considera o maxlength da primeira aba.

Existe alguma solução?

Código jQuery

$("#menu_dias li").first().addClass('current selecionado');
var maximo = $("#menu_dias li.current").first().data('total');
var dia    = $("#menu_dias li.current").first().data('dia');
$("#maximo").val(maximo);
$("#iddia").val($("#menu_dias li.current").first().data('id'));

$("#signup").validate({
    rules: {
        'idatividade[]': {
            required: false,
            maxlength: maximo
        }
    },
    messages: {
        'idatividade[]': {
            required: "Você precisa selecionar no mínimo {1} opções",
            maxlength: "Check no more than {1} boxes"
        }
    },
    errorPlacement: function (error, element) { 
        $('div.aviso').text("Você não pode selecionar mais que "+maximo+" atividades.");
        $('div.aviso').fadeIn("slow");
        $('div.aviso').delay(2000).fadeOut("slow");
    }
});


$('.data').text(dia);
$("#enviar").hide();
$("#prev").hide();

$("body").on("keyup", "form", function(e){
  if (e.which == 13){
    if ($("#next").is(":visible") && $("fieldset.current").find("input, textarea").valid() ){
      e.preventDefault();
      nextSection();
      return false;
    }
  }
});


$("#next").on("click", function(e){
  if ($("#next").is(":visible") && $("fieldset.current").find("input, textarea").valid() ){
    e.preventDefault();
    nextSection();
    maximo = $("#menu_dias li.current").data('total');
    $('.data').text($("#menu_dias li.current").data('dia'));
    $("#maximo").val(maximo);
    $("#iddia").val($("#menu_dias li.current").data('id'));
    return false;
  }
});


$("form").on("submit", function(e){
  if ($("#next").is(":visible") || $("fieldset.current").index() < $("fieldset").last().index() || !$("fieldset.current").find("input, textarea").valid()){
    e.preventDefault();
    return false;
  }
});

$("#prev").on("click", function(e){
  if ($("fieldset.current").index() != $("fieldset").first().index()){
    e.preventDefault();
    prevSection()
    maximo = $("#menu_dias li.current").data('total');
    $('.data').text($("#menu_dias li.current").data('dia'));
    $("#maximo").val(maximo);
    $("#iddia").val($("#menu_dias li.current").data('id'));
    return false;
  }
});
function nextSection(){
  var i = $("fieldset.current").index();
  if (i < $("fieldset").last().index()){    
    $("#menu_dias li").eq(i+1).addClass("selecionado");
    goToSection(i+1);
  }
}

function prevSection(){
  var i = $("fieldset.current").index();
  if (i <= $("fieldset").last().index()){
    $("#menu_dias li").eq(i-1).addClass("selecionado");
    goToSection(i-1);
  }
}

$("#menu_dias li").on("click", function(e){
  var i = $(this).index();
  console.log(i);

  if ($(this).hasClass("selecionado")){
    goToSection(i);
    maximo = $("#menu_dias li.current").data('total');
    dia    = $("#menu_dias li.current").data('dia');
    $("#maximo").val(maximo);
    $("#iddia").val($("#menu_dias li.current").data('id'));
  } else {
    alert("Selecione as opções primeiro.");
  }
});


function goToSection(i){

  $("fieldset:gt("+i+")").removeClass("current").addClass("next");
  $("li").eq(i).addClass("current").siblings().removeClass("current");

  $("fieldset").eq(i).removeClass("next").addClass("current selecionado");
  $("fieldset:lt("+i+")").removeClass("current").addClass("next");
  if ($("fieldset.current").index() == $("fieldset").last().index()){
    $("#next").hide();
    $("input[type=submit]").show();
  } if ($("fieldset.current").index() != $("fieldset").first().index()){
    $("#prev").show();
  }else {
    $("#next").show();
    $("input[type=submit]").hide();
  }

}

HTML

<form id="signup" action="admprecadastro.php" method="POST">
    <fieldset id="grid" class="current selecionado">
        <table cellpadding="1" cellspacing="1" width="100%" id="atividades">
            <tr>
                <td>
                    Checkbox
                </td>                                            
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="idatividade[]" value="1" id="idatividade"/>
                    <input type="checkbox" name="idatividade[]" value="2" id="idatividade"/>
                    <input type="checkbox" name="idatividade[]" value="3" id="idatividade"/>
                    <input type="checkbox" name="idatividade[]" value="4" id="idatividade"/>
                    <input type="checkbox" name="idatividade[]" value="5" id="idatividade"/>
                </td>                         
            </tr>
        </table>
    </fieldset>
    <fieldset id="grid" class="next">
        <table cellpadding="1" cellspacing="1" width="100%" id="atividades">
            <tr>
                <td>
                    Checkbox
                </td>                                            
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="idatividade[]" value="6" id="idatividade"/>
                    <input type="checkbox" name="idatividade[]" value="7" id="idatividade"/>
                    <input type="checkbox" name="idatividade[]" value="8" id="idatividade"/>
                    <input type="checkbox" name="idatividade[]" value="9" id="idatividade"/>
                    <input type="checkbox" name="idatividade[]" value="10" id="idatividade"/>
                </td>                         
            </tr>
        </table>
    </fieldset>
    <fieldset id="grid" class="next">
        <table cellpadding="1" cellspacing="1" width="100%" id="atividades">
            <tr>
                <td>
                    Checkbox
                </td>                                            
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="idatividade[]" value="11" id="idatividade"/>
                    <input type="checkbox" name="idatividade[]" value="12" id="idatividade"/>
                    <input type="checkbox" name="idatividade[]" value="13" id="idatividade"/>
                    <input type="checkbox" name="idatividade[]" value="14" id="idatividade"/>
                    <input type="checkbox" name="idatividade[]" value="15" id="idatividade"/>
                </td>                         
            </tr>
        </table>
    </fieldset>
    <div class="botoes">
        <input type="hidden" name="maximo" id="maximo"/>
        <div class="seguinte">
            <a class="btn" id="next">Próximo</a>
            <input type="submit" id="enviar" value="Enviar">
        </div>
    </div>
</form>
<script type="text/javascript">
    $("#idatividade").rules("add", { max: $("#maximo").val()});
</script>
3
  • 1
    As IDs têm de ser unicas! Você devia usar classes se que agrupar com o mesmo nome.
    – Sergio
    Commented 16/02/2014 às 6:55
  • Felipe, para além da minha resposta em baixo aqui está um jsFiddle. Depois de corrigir o que eu sugerí, se ainda tiver o problema, clique no link do jsFiddle e adicione o seu código até apresentar o seu problema lá, faça update e poste aqui de novo.
    – Sergio
    Commented 16/02/2014 às 7:30
  • Sergio, no jsFiddle deu vários problemas, então subi em um host. Como não achei a opção de enviar PM por aqui, tomei a liberdade de te enviar os dados por email. Commented 18/02/2014 às 0:24

1 Resposta 1

2

As IDs têm de ser unicas! Você devia usar classes se que agrupar com o mesmo nome. Ter o mesmo ID para vários elementos é "HTML inválido" e pode fazer com que só o primeiro seja considerado, e outros bugs estranhos. O melhor é usar class para agrupar elementos e chamar métodos neles.

Teste mudar todos os id="idatividade"/> para class="idatividade"/>

E este código

<script type="text/javascript">
    $("#idatividade").rules("add", { max: $("#maximo").val()});
</script>

para

<script type="text/javascript">
    $(".idatividade").rules("add", { max: $("#maximo").val()});
</script>
2
  • Não resolveu. Alterando o máximo pra 2, como já marquei 4 campos na primeira aba, avisa que só posso marcar 2. =/ Commented 16/02/2014 às 18:26
  • @FelipeTurquize, pode atualizar o jsFiddle que coloquei nos comments e devolver com o seu código, onde mostre o problema?
    – Sergio
    Commented 16/02/2014 às 18:31

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .