如何在可滚动表单上进行验证

我创建了以下可滚动的测验，最后一节是一个输入表单：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();
          }
      });
  });