0
Я создал следующую прокручивать викторину с формой входа в качестве последнего раздела: 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();
}
});
});