app.js

$(".drydepot-product-fitter").steps({
    headerTag: "h3",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    autoFocus: true,
    onStepChanging: function (event, currentIndex, newIndex)
    {
        if (currentIndex > newIndex) {
            return true;
        }

        if (currentIndex === 0 && !$("input[name='gender']").is(':checked')) {
            return false;
        }

        if (currentIndex === 1 && !$("input[name='gender']").is(':checked')) {
            return false;
        }

        if (currentIndex === 2 && !$("input[name='gender']").is(':checked')) {
            return false;
        }

        if (currentIndex === 3 && !$("input[name='gender']").is(':checked')) {
            return false;
        }

        // else return true
        return true
    },
    onFinished: function(event, currentIndex) {
        var data = $('.drydepot-product-fitter').serializeArray();
        ul = $("<ul/>");
        $(data).each(function(){
            $("<li/>").text(this.name + ": " + this.value).appendTo(ul);
        });
        $('.resultsheader').show()
        $('.results').append(ul)
    },
});

index.html

<style>
  h3 {
    display:none;
  }
  h3.current {
    display:block;
  }
/*  a[href$="#finish"] {
    display:none;
  }*/
  .resultsheader {
    display:none;
  }
</style>

<div class="container">


  <form class="drydepot-product-fitter">

  <h3>Step 1</h3>

    <!-- Gender -->
    <section>
      <label class="control-label" for="gender">gender:</label>
      <input type="radio" name="gender" id="gender-0" value="0"> male
      <input type="radio" name="gender" id="gender-1" value="1"> female
    </section>

    <h3>Step 2</h3>

    <!-- Absorbency -->
    <section>
      <label class="control-label" for="absorbency">Absorbency:</label>
      <input type="radio" name="absorbency" id="absorbency-0" value="0"> light
      <input type="radio" name="absorbency" id="absorbency-1" value="1"> moderate
      <input type="radio" name="absorbency" id="absorbency-2" value="2"> heavy
    </section>

    <h3>Step 3</h3>
type-of-protection
    <!-- Type Of Protection -->
    <section>
      <label class="control-label" for="type-of-protection">type-of-protection:</label>
      <input type="radio" name="type-of-protection" id="type-of-protection-0" value="0"> inside
      <input type="radio" name="type-of-protection" id="type-of-protection-1" value="1"> underwear
    </section>

    <h3>Step 4</h3>

    <!-- extra-length -->
    <section>
      <label class="control-label" for="extra-length-padding">extra-length-padding:</label>
      <input type="radio" name="extra-length-padding" id="extra-length-padding-0" value="0"> regular
      <input type="radio" name="extra-length-padding" id="extra-length-padding-1" value="1"> extra length
    </section>

    <h3>Step 5</h3>

    <!-- active -->
    <section class="form-group">
      <label class="control-label" for="activeflag">active:</label>
      <input type="radio" name="activeflag" id="activeflag-0" value="0"> active
      <input type="radio" name="activeflag" id="activeflag-1" value="1"> not-active
    </section>


  </form>
</div>

<h1 class="resultsheader">Results</h1>
<div class="results">
</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.min.js"></script>
<script type="text/javascript" src="/serializeform.js"></script>
<script type="text/javascript" src="/app.js"></script>

serializeform.js

jQuery.fn.serializeform = function() {
  var json = {};
  jQuery.map(jQuery(this).serializeArray(), function(n, i) {
    var _ = n.name.indexOf('[');
    if (_ > -1) {
      var o = json;
      _name = n.name.replace(/\]/gi, '').split('[');
      for (var i=0, len=_name.length; i<len; i++) {
        if (i == len-1) {
          if (o[_name[i]]) {
            if (typeof o[_name[i]] == 'string') {
              o[_name[i]] = [o[_name[i]]];
            }
            o[_name[i]].push(n.value);
          }
          else o[_name[i]] = n.value || '';
        }
        else o = o[_name[i]] = o[_name[i]] || {};
      }
    }
    else {
      if (json[n.name] !== undefined) {
        if (!json[n.name].push) {
          json[n.name] = [json[n.name]];
        }
        json[n.name].push(n.value || '');
      }
      else json[n.name] = n.value || '';
    }
  });
  return json;
};