jQuery validation plugin + tabs

Question

I created a simple flap system with hide() and show(). Within each of these tabs (dynamically listed), there will be several checkboxes (also dynamically listed).

The user will not be required to select any option, but each tab will have a maxlength different. And therein lies the problem.

Example:

First tab: maxlength = 4 Second tab: maxlength = 1

Assuming that the user selected four checkboxes in the first tab, when he goes to the second and selects a checkbox, the system does not allow me to advance to the third, because it is as if the user had selected 5, that is, beyond the limit.

I’m taking the maximum allowable amount of one input hidden, but for some reason he only considers the maxlength first-tab.

Is there any solution?

Code 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>

Answer 1

Ids have to be unique! You should use classes if you group with the same name. Having the same ID for various elements is "invalid HTML" and can cause only the first to be considered, and other strange bugs. It is best to use class to group elements and call methods in them.

Test change all the id="idatividade"/> for class="idatividade"/>

And this code

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

for

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