我创建了以下表单:
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();
}
});
});
我能够验证输入部分并选择下拉表单元素就好......但由于某种原因无法验证 radio 表单元素。有人知道我需要专门对此代码做什么才能使 radio 验证工作吗?谢谢。
最佳答案
工作演示 http://jsfiddle.net/7qD6F/ 或 http://jsfiddle.net/4Shvw/ 或 http://jsfiddle.net/7N8K9/
无警报版本 http://jsfiddle.net/8tMbV/
希望这能满足您的需求:)
我已经单独处理了input
单选按钮,以便让您清楚地了解!
代码
$(function () {
var root = $("#wizard").scrollable();
var isRadioCheck = false; //<======================New Var
// 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 || $('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, '') == '';
});
// alert('Empty Value is bool : ' + empty.length + isRadioCheck);
// if there are empty fields, then
if (empty.length || !isRadioCheck) { //<======================Conditional Check
// 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");
$('.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();
}
});
});
图片 工作亮点
关于html - 如何验证 radio 部分?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19822284/