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