我创建了以下可滚动测验，其中一个条目表单作为最后一部分： http://jsfiddle.net/baumdexterous/xsWz5/
我希望验证能够发生，但由于某种原因，它只适用于第一个问题（尝试点击下一个而不选择其中一个无线电选项）但不能解决剩下的问题。此外，验证不适用于最后一节（条目表单）中的字段。
知道如何在所有部分进行验证吗？非常感谢。
<div id="drawer">
Please complete all the required fields.
</div>
<div id="main">
<!-- the form -->
<form action="http://jquerytools.org/demos/scrollable/wizard.htm#">
<div id="wizard">
<ul id="status">
<li class="active" style="margin-left: -5px;"><p>1</p></li>
<li style="margin-left: 56px;"><p>2</p></li>
<li style="margin-left: 56px;"><p>3</p></li>
<li style="margin-left: 56px;"><p>4</p></li>
<li style="margin-left: 56px;"><p>5</p></li>
<li style="margin-left: 56px;"><p>6</p></li>
<li style="margin-left: 56px;"><p>7</p></li>
<li style="margin-left: 56px;"><p>8</p></li>
<li style="margin-left: 63px;"><p>Entry <br />Form</p></li>
</ul>
<div class="items">
<!-- Question 1 -->
<div class="page one">
<h1>1</h1>
<p>Question 1</p>
<ul>
<li class="required double">
<div class="qselections orio required">
<p><input type="radio" value="a" name="question1" data-type="false">a) Answer (wrong)</p>
<p><input type="radio" value="b" name="question1" data-type="false">b) Answer (wrong)</p>
<p><input type="radio" value="c" name="question1" data-type="true">c) Answer (right)</p>
<div class="content content-false">Incorrect: The correct answer is C.</div>
<div class="content content-true">Correct</div>
</div>
</li>
</ul>
<li class="clearfix">
<button type="button" class="next right">Next</button>
</li>
</div>
<!-- Question 2 -->
<div class="page two">
<h1>2</h1>
<p>Question 2</p>
<ul>
<li class="required double">
<div class="qselections orio required">
<p><input type="radio" value="a" name="question1" data-type="false">a) Answer (wrong)</p>
<p><input type="radio" value="b" name="question1" data-type="false">b) Answer (wrong)</p>
<p><input type="radio" value="c" name="question1" data-type="true">c) Answer (right)</p>
<div class="content content-false">Incorrect: The correct answer is C.</div>
<div class="content content-true">Correct</div>
</div>
</li>
</ul>
<li class="clearfix">
<button type="button" class="next right">Next</button>
</li>
</div>
<!-- Question 3 -->
<div class="page three">
<h1>3</h1>
<p>Question 3</p>
<ul>
<li class="required double">
<div class="qselections orio required">
<p><input type="radio" value="a" name="question1" data-type="false">a) Answer (wrong)</p>
<p><input type="radio" value="b" name="question1" data-type="false">b) Answer (wrong)</p>
<p><input type="radio" value="c" name="question1" data-type="true">c) Answer (right)</p>
<div class="content content-false">Incorrect: The correct answer is C.</div>
<div class="content content-true">Correct</div>
</div>
</li>
</ul>
<li class="clearfix">
<button type="button" class="next right">Next</button>
</li>
</div>
<!-- Question 4 -->
<div class="page four">
<h1>4</h1>
<p>Question 4</p>
<ul>
<li class="required double">
<div class="qselections orio required">
<p><input type="radio" value="a" name="question1" data-type="false">a) Answer (wrong)</p>
<p><input type="radio" value="b" name="question1" data-type="false">b) Answer (wrong)</p>
<p><input type="radio" value="c" name="question1" data-type="true">c) Answer (right)</p>
<div class="content content-false">Incorrect: The correct answer is C.</div>
<div class="content content-true">Correct</div>
</div>
</li>
</ul>
<li class="clearfix">
<button type="button" class="next right">Next</button>
</li>
</div>
<!-- Question 5 -->
<div class="page five">
<h1>5</h1>
<p>Question 5</p>
<ul>
<li class="required double">
<div class="qselections orio required">
<p><input type="radio" value="a" name="question1" data-type="false">a) Answer (wrong)</p>
<p><input type="radio" value="b" name="question1" data-type="false">b) Answer (wrong)</p>
<p><input type="radio" value="c" name="question1" data-type="true">c) Answer (right)</p>
<div class="content content-false">Incorrect: The correct answer is C.</div>
<div class="content content-true">Correct</div>
</div>
</li>
</ul>
<li class="clearfix">
<button type="button" class="next right">Next</button>
</li>
</div>
<!-- Question 6 -->
<div class="page six">
<h1>6</h1>
<p>Question 6</p>
<ul>
<li class="required double">
<div class="qselections orio required">
<p><input type="radio" value="a" name="question1" data-type="false">a) Answer (wrong)</p>
<p><input type="radio" value="b" name="question1" data-type="false">b) Answer (wrong)</p>
<p><input type="radio" value="c" name="question1" data-type="true">c) Answer (right)</p>
<div class="content content-false">Incorrect: The correct answer is C.</div>
<div class="content content-true">Correct</div>
</div>
</li>
</ul>
<li class="clearfix">
<button type="button" class="next right">Next</button>
</li>
</div>
<!-- Question 7 -->
<div class="page seven">
<h1>7</h1>
<p>Question 7</p>
<ul>
<li class="required double">
<div class="qselections orio required">
<p><input type="radio" value="a" name="question1" data-type="false">a) Answer (wrong)</p>
<p><input type="radio" value="b" name="question1" data-type="false">b) Answer (wrong)</p>
<p><input type="radio" value="c" name="question1" data-type="true">c) Answer (right)</p>
<div class="content content-false">Incorrect: The correct answer is C.</div>
<div class="content content-true">Correct</div>
</div>
</li>
</ul>
<li class="clearfix">
<button type="button" class="next right">Next</button>
</li>
</div>
<!-- Question 8 -->
<div class="page eight">
<h1>8</h1>
<p>Question 8</p>
<ul>
<li class="required double">
<div class="qselections orio required">
<p><input type="radio" value="a" name="question1" data-type="false">a) Answer (wrong)</p>
<p><input type="radio" value="b" name="question1" data-type="false">b) Answer (wrong)</p>
<p><input type="radio" value="c" name="question1" data-type="true">c) Answer (right)</p>
<div class="content content-false">Incorrect: The correct answer is C.</div>
<div class="content content-true">Correct</div>
</div>
</li>
</ul>
<li class="clearfix">
<button type="button" class="next right">Next</button>
</li>
</div>
<!-- page3 -->
<div class="page" style="background:white">
<h2>
<strong>Step 2: </strong> Contact Information <b></b>
<em>Please tell us where you live:</em>
</h2>
<ul>
<!-- address -->
<li class="required">
<label>
<strong>1.</strong>
Enter Your Street Address <span>*</span><br>
<input type="text" class="text" name="email">
<em><strong>Example</strong>: Random Street 69 A 666</em>
</label>
</li>
<!-- zip / city -->
<li class="required double">
<label>
<strong>2.</strong> Enter Your Zip Code <span>*</span><br>
<input class="text" name="zip">
<em>This must be a numeric value</em>
</label>
<label>
<strong>3.</strong> and The City <span>*</span>
<select name="city">
<option value="">-- please select --</option>
<option>Helsinki</option>
<option>Berlin</option>
<option>New York</option>
</select>
</label>
</li>
<li class="clearfix">
<button type="button" class="next right">
Next
</button>
</li>
<br clear="all">
</ul>
</div>
<!-- page4 -->
<div class="page">
<h2>
<strong>Step 3: </strong> Congratulations! <b></b>
<em>You are now a happy member of the Open Source community</em>
</h2>
<img src="http://jquerytools.org/media/img/title/eye.png" style="margin:30px 0 0 140px">
</div>
</div><!--items-->
</div><!--wizard-->
</form>
</div> <!-- end wrapper -->
这是我的JavaScript：
$(function () {
var root = $("#wizard").scrollable();
var isRadioCheck = false;
// some variables that we need
var api = root.scrollable(),
drawer = $("#drawer");
// prevent the user from making another selection once one radio option has been selected
$('input[type=radio]').click(function() {
var name = $(this).attr("name");
$("input[name=" + name + "]").prop("disabled", true);
});
// Show user correct answer
$(function () {
$('.orio').each(function (i) {
var $row = $(this);
var $radios = $row.find('input');
$radios.attr('name', 'group-' + i);
$radios.on('change', function () {
var type = $(this).attr('data-type');
$row
.find('.content').hide()
.filter('.content-' + type)
.show();
});
});
});
// validation logic is done inside the onBeforeSeek callback
api.onBeforeSeek(function (event, i) {
// we are going 1 step backwards so no need for validation
if (api.getIndex() < i || $('input[type=radio]').is(':checked')) {
// 1. get current page
var page = root.find(".page,.qselections").eq(api.getIndex()),
// 2. .. and all required fields inside the page
inputs = page.find(".required :input").removeClass("error"),
// 3. .. which are empty
empty = inputs.filter(function () {
isRadioCheck = $('input[type=radio]').is(':checked');
return $(this).val().replace(/\s*/g, '') == '';
});
//ealert('Empty Value is bool : ' + empty.length + isRadioCheck);
if (isRadioCheck) {
$('.qselections').removeClass("error");
//alert('removed');
}
// if there are empty fields, then
if (empty.length || !isRadioCheck) {
// slide down the drawer
drawer.slideDown(function () {
// colored flash effect
drawer.css("backgroundColor", "#fff");
setTimeout(function () {
drawer.css("backgroundColor", "#fff");
}, 1000);
});
// add a CSS class name "error" for empty & required fields
empty.addClass("error");
if (!isRadioCheck) $('.qselections').addClass("error");
// cancel seeking of the scrollable by returning false
return false;
// everything is good
} else {
// hide the drawer
drawer.slideUp();
}
}
// update status bar
$("#status li").removeClass("active").eq(i).addClass("active");
});
// if tab is pressed on the next button seek to next page
root.find("button.next").keydown(function (e) {
if (e.keyCode == 9) {
// seeks to next tab by executing our validation routine
api.next();
e.preventDefault();
}
});
});
答案 0 :(得分：0)
我的朋友帮我解决了这个问题。这是解决方案： http://jsfiddle.net/baumdexterous/ejRxs/
他在onBeforeSeek方法上做了很多改动，摆脱了并行分配 并改变它选择标签的方式（并完全取消'空'选择器）。谢谢！
更新了JavaScript：
$(function () {
var root = $("#wizard").scrollable();
var isRadioCheck = false;
// some variables that we need
var api = root.scrollable(),
drawer = $("#drawer");
// prevent the user from making another selection once one radio option has been selected
$('input[type=radio]').click(function() {
var name = $(this).attr("name");
$("input[name=" + name + "]").prop("disabled", true);
});
// Show user correct answer
$(function () {
$('.orio').each(function (i) {
var $row = $(this);
var $radios = $row.find('input');
$radios.attr('name', 'group-' + i);
$radios.on('change', function () {
var type = $(this).attr('data-type');
$row
.find('.content').hide()
.filter('.content-' + type)
.show();
});
});
});
// validation logic is done inside the onBeforeSeek callback
api.onBeforeSeek(function (event, i) {
// we are going 1 step backwards so no need for validation
if (api.getIndex() < i || $('input[type=radio]').is(':checked')) {
// 1. get current page
var page = root.find(".page").eq(api.getIndex());
// 2. .. and all required fields inside the page
var inputs = page.find(".required input");
var isRadioCheck = inputs.is(':checked');
//ealert('Empty Value is bool : ' + empty.length + isRadioCheck);
if (isRadioCheck) {
$('.qselections').removeClass("error");
//alert('removed');
}
// if there are empty fields, then
if (!isRadioCheck) {
// slide down the drawer
drawer.slideDown(function () {
// colored flash effect
drawer.css("backgroundColor", "#fff");
setTimeout(function () {
drawer.css("backgroundColor", "#fff");
}, 1000);
});
// add a CSS class name "error" for empty & required fields
inputs.addClass("error");
if (!isRadioCheck) $('.qselections').addClass("error");
// cancel seeking of the scrollable by returning false
return false;
// everything is good
} else {
// hide the drawer
drawer.slideUp();
}
}
// update status bar
$("#status li").removeClass("active").eq(i).addClass("active");
});
// if tab is pressed on the next button seek to next page
root.find("button.next").keydown(function (e) {
if (e.keyCode == 9) {
// seeks to next tab by executing our validation routine
api.next();
e.preventDefault();
}
});
});