Friends, I created a simple guide system with hide () and show (). Within each of these guides (listed dynamically) there will be multiple checkbox (also listed dynamically).
The user will not be required to select any checkbox, but each tab will have a different maxlength. That’s the problem.
example:
1st tab: maxlength: 4
2nd tab: maxlength: 1
Assuming that the user selected 4 fields on the first tab when he goes for second and selects one field, the system shows error since records as if the user had selected 5, ie, past the limit.
How do I solve this?
My 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();
}
}
<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>