How to validate radio part?

Question

I created the following form:

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>

Here is the existing validation:

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

I am able to validate the input part and select dropdown form elements just fine... but for some reason unable to validate the radio form element. Anyone knows what I need to do specifically to this code to make the radio validation work? Thank you.

Answer 1

Working Demo http://jsfiddle.net/7qD6F/ OR http://jsfiddle.net/4Shvw/ OR http://jsfiddle.net/7N8K9/

Alertless version http://jsfiddle.net/8tMbV/

Hope this will fit your need :)

I have treated the input radiobutton separately to make it clear for you!

Code

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

Image working highlight