我创建了以下表格:
http://jsfiddle.net/baumdexterous/KKqbT/1/
<!-- VALIDATION NOTIFICATION -->
<div id="drawer">Please fill in the empty fields marked with a <samp style="color:red">red</samp> border.</div>
<!-- END VALIDATION NOTIFICATION -->
<!-- FORM -->
<form action="#">
<div id="wizard">
<div class="items">
<div class="page">
<ul>
<li class="required">
<!-- INPUT -->
<label>Your Email:<br><input type="text" class="text" name="email"></label>
<!-- SELECT DROPDOWN -->
<label>Your City
<select name="city">
<option value="">-- please select --</option>
<option>Helsinki</option>
<option>Berlin</option>
<option>New York</option>
</select>
</label>
<!-- RADIO -->
<label>What's the U.S. capital?<br>
<div class="qselections">
<input type="radio" value="a" name="question1">a) New York<br>
<input type="radio" value="b" name="question1">b) Washington DC<br>
<input type="radio" value="c" name="question1">c) Seattle<br>
<input type="radio" value="d" name="question1">d) Portland<br>
</div>
</label>
</li>
<li class="clearfix">
<button type="button" class="next right">
Proceed »
</button>
</li>
</ul>
</div> <!-- end page -->
</div><!--items-->
</div><!--wizard-->
</form>
这是现有的验证:
$(function() {
var root = $("#wizard").scrollable();
// some variables that we need
var api = root.scrollable(), drawer = $("#drawer");
// 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) {
// 1. get current page
var page = root.find(".page").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() {
return $(this).val().replace(/\s*/g, '') == '';
});
// if there are empty fields, then
if (empty.length) {
// slide down the drawer
drawer.slideDown(function() {
// colored flash effect
drawer.css("backgroundColor", "#229");
setTimeout(function() { drawer.css("backgroundColor", "#fff"); }, 1000);
});
// add a CSS class name "error" for empty & required fields
empty.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();
}
});
});
我能够验证输入部分并选择下拉表单元素就好了......但由于某种原因无法验证单选表单元素。任何人都知道我需要专门对这段代码做什么才能使无线电验证工作?谢谢你。