0
친구, hide() 및 show()를 사용하여 간단한 가이드 시스템을 만들었습니다. 이 가이드 (동적으로 나열)에는 여러 개의 확인란 (동적으로 나열된)이 있습니다.jQuery validation plugin + tabs
사용자는 확인란을 선택하지 않아도되지만 각 탭의 최대 길이는 다릅니다. 그것이 문제이다.
예 :
첫번째 탭 : 최대 길이 : 4 2 탭 : 최대 길이 : 그 초 동안 진행 한 필드, 시스템을 선택할 때, 사용자가 첫 번째 탭의 4 개 필드를 선택했다고 가정 한
사용자가 5를 선택한 것처럼 레코드 이후 오류를 표시합니다 (즉, 한도를 초과 한 경우).
어떻게 해결할 수 있습니까?
내 코드 :
$("#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>