jQuery validation plugin + tabs

Question

jQuery validation plugin + tabs

Navigation

#1 by (2 votes)

2

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

The user will not be forced to select any option, but each tab will have a maxlength different. And that's where the problem lies.

Example:

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

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

I'm getting the maximum allowed value of a input hidden , but for some reason it only considers the maxlength of the first tab.

Is there a solution?

jQuery code

$("#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>

javascript jquery

asked by anonymous 16.02.2014 / 07:19

1 answer

Nginx with SSL connection error CakePhp via Shell returns error: class HelloShell could not be loaded

score 2 · Answer 1

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

Test change all id="idatividade"/> to 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>