0
我有第一面板和第三面板中的一个字段。当有一个空的字段，并且在面板1上单击“下一步”时，验证不会显示“请输入名字”。一旦我到达第三个面板并选择“下一步”，则验证会显示“请输入名称”。有没有一种方法我可以有验证显示，当有基于其特定的小组，而不是去第三面板，然后眼看着验证在空场的通知？面板与验证
一方面我注意到：当面板3字段不为空，和“下一步”被选择时，我不能进行第四面板，因为输入是在面板1空会出现这种情况，反之亦然。 （如果验证显示在面板1中，然后输入字段，则“下一步”将不会进入第三个面板）。
我试过 我试图定位按钮并删除验证所针对的类。它不起作用，因为验证值在所有面板1-4上都有效。如果我得到一个大拇指下来，请告诉我为什么，所以我可以改善我下次的问题。感谢您的时间！
$(document).ready(function() {
var $fieldsets =
$('#panels .sets')
.first()
.addClass('active')
.end()
.not(':first')
.hide()
.end();
var $panelControlButtons =
$('#panelcontrol button')
.filter('.btnPrev')
.prop('disabled', true)
.end();
$('#panelcontrol')
.on('click', 'button', function(e) {
e.preventDefault();
switch (true) {
case $(this).hasClass('btnNext'):
var $newFieldset =
$fieldsets
.filter('.active')
.hide()
.removeClass('active')
.next()
.addClass('active')
.show();
$('.btnNext').click(function(e) {
var focusSet = false;
// validate email - not empty
//FIRST NAME
if (!$('#first').val()) {
if ($("#first").parent().next(".validation").length == 0) {
$("#first").parent().after("<div class='validation' style='color:red;margin-top: -20px;'>Please enter first name</div>");
}
//e.preventDefault();
$('#first').focus();
focusSet = true;
} else {
//ok
$("#first").parent().next(".validation").remove();
}
//after all validate
if (focusSet) {
$("#c").removeClass("btnNext"); //remove class for continue button. Disabling continue
} else {
$("#c").addClass('btnNext'); //adds class for the continue button. Enabling continue
}
//THIRD NAME
if (!$('#third').val()) {
if ($("#third").parent().next(".validation").length == 0) {
$("#third").parent().after("<div class='validation' style='color:red;margin-top: -20px;'>Please enter third name</div>");
}
//e.preventDefault();
$('#third').focus();
focusSet = true;
} else {
//ok
$("#third").parent().next(".validation").remove();
}
//after all validate
if (focusSet) {
$("#c").removeClass("btnNext"); //remove class for continue button. Disabling continue
} else {
$("#c").addClass('btnNext'); //adds class for the continue button. Enabling continue
}
});
if ($newFieldset.is('.two')) {
var $newFieldset =
$fieldsets
.filter('.active')
.hide()
.removeClass('active')
.next()
.addClass('active')
.show();
}
//$('.two').removeClass('active'); this removes the second panel when selecting prev button
if ($newFieldset.is(':nth-child(2)')) {
$panelControlButtons
.next();
}
//enable Prev button
$panelControlButtons
.filter('.btnPrev')
.prop('disabled', false);
$('.btnPrev_one_time').css('display', 'block');
//disabled Next button
if ($newFieldset.is(':last-child')) {
$panelControlButtons
.filter('.btnNext')
.prop('disabled', true);
$(':last-child').find(".btnNext_one_time").text("Place Payment"); //once last child element, btn will change text
}
break; // btnNext
var $input =
$('input')
.filter('.active')
.end();
case $(this).hasClass('btnPrev'):
var $newFieldset =
$fieldsets
.filter('.active') //selects the current fieldset
.hide() //hide it \t
.removeClass('active') //remove active flag
.prev() //move to the previous fieldset
.addClass('active') //flag as active
.show();
// testing only $('.two').css('display','none').removeClass('active').next().addClass('active').show().filter(); \t \t
$('.two').css('display', 'none').filter('.active')
.filter('.active') //selects the current fieldset
.hide() //hide it \t
.removeClass('active') //remove active flag
.prev() //move to the previous fieldset
.addClass('active') //flag as active
.show();
//and show it
// enable Next button
$panelControlButtons
.filter('.btnNext')
.prop('disabled', false);
// disable Prev button \t \t \t
if ($newFieldset.is(':first-child')) {
$panelControlButtons
.filter('.btnPrev')
.prop('disabled', true);
}
break; // btn Prev
}
}); // panelcontrol button handler
$('.check_box').on('change', function() {
if (this.checked) {
$("#second_panel").removeClass('two');
} else {
$("#second_panel").addClass('two');
}
});
});.sets {
display: none;
}
.active {
display: block;
}<!doctype html>
<html lang="engl">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="jquery/main.js"></script>
<meta charset="utf-8">
</head>
<body>
<div id="container">
<div id="panels">
<div class="sets active">
<h1>PANEL 1</h1><button>Attach/detach paragraphs</button>
<div>
<label for="first">First Name</label>
<input type="first" id="first" placeholder="" />
</div>
</div>
<div id="second_panel" class="sets two">
<h1>PANEL 2</h1>
<p>w</p>
<div>
<label for="second">Second Name</label>
<input type="second" id="second" placeholder="" />
</div>
</div>
<div class="sets three">
<h1>PANEL 3</h1>
<div>
<label for="third">Third Name</label>
<input type="third" id="third" placeholder="" />
</div>
</div>
<div class="sets active">
<h1>PANEL 4</h1>
<div><input name="ss4" value="" /></div>
</div>
</div>
<form action="">
<input type="checkbox" name="vehicle" value="Bike" class="check_box">check for panel 2<br>
</form>
</div>
<div id="panelcontrol">
<button class="btnPrev">Prev</button>
<button class="btnNext" id="c">Next</button>
<button class="btnNext_one_time">CONTINUE</button>
</div>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
</body>
</html>
为什么在你的HTML这么多的jQuery的脚本？ 1应该这样做。 – tommyO
另外'switch（true）'并没有意义。你的代码总是会在'default'块中结束，而且由于你写了一个默认的例子，你的交换机不会做任何事情。 – tommyO