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

时间:2013-11-19 18:06:36

标签: javascript jquery validation

我创建了以下可滚动测验,其中一个条目表单作为最后一部分: 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();
          }
      });
  });

1 个答案:

答案 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();
          }
      });
  });