easywaya-stepper.js

(function( $ ){
  $.fn.formalize = function(options){
    var settings = $.extend({
      section: 'fieldset',
      wrapper: '.form-section',
      navType: 'section',
      prevNav: '.form-nav-prev',
      nextNav: '.form-nav-next',
      timing: 0,
      nextCallback: null,
      prevCallback: null
    }, options),
    form = this,
    sections = [];
    form.find(settings.wrapper).each(function(){
      sections.push($(this));
    });
    var sectionsCount = sections.length;

    for (var i = 1; i < sectionsCount; i++){
      sections[i].hide();
    };
    showSection(form.find($(settings.section)).first());

    $(settings.nextNav).on('click', function(){
      showNextSection($(this).closest(settings.section));
    })

    $(settings.prevNav).on('click', function(){
      showPrevSection($(this).closest(settings.section));
    })

    function showNextSection(curr){
      if (settings.nextCallBack != null){
        if (settings.nextCallBack()){
          hideSection(curr);
          showSection(curr.next());
        }
      }
      else{
        hideSection(curr);
        showSection(curr.next());
      }
    };

    function showPrevSection(curr){
      if (settings.prevCallBack != null){
        if (settings.prevCallBack()){
          hideSection(curr);
          showSection(curr.prev());
        }
      }
      else{
        hideSection(curr);
        showSection(curr.prev());
      }
    };

    function hideSection(section){
      section.find(settings.wrapper).slideUp(settings.timing);
      section.removeClass('open');
    };

    function showSection(section){
      section.find(settings.wrapper).slideDown(settings.timing);
      section.addClass('open');
    };

    function firstSectionIsOpen(){
      return (form.find($('.open'))[0] == form.find($(settings.section)).first()[0]);
    };

    function lastSectionIsOpen(){
      return (form.find($('.open'))[0] === form.find($(settings.section)).eq(sectionsCount - 1)[0]);
    };

    function firstNav(){
      setDisabled($(settings.prevNav));
      setEnabled($(settings.nextNav));
    };

    function lastNav(){
      setEnabled($(settings.prevNav));
      setDisabled($(settings.nextNav));
    };

    function intermediateNav(){
      setEnabled($(settings.prevNav));
      setEnabled($(settings.nextNav));
    };

    function setDisabled(elt){
      elt.addClass('disabled');
    }

    function setEnabled(elt){
      elt.removeClass('disabled');
    }

  };
}(jQuery));

// -------------------------------------------------
// -------------------------------------------------
// -------------------------------------------------

$(document).ready(function(){
  $('#sectional').formalize({
    timing: 400,
    nextCallBack: function(){
      if (validateEmpty($('#sectional .open'))){
        scrollToNewSection($('#sectional .open'));
        return true;
      };
      return false;
    },
    prevCallBack: function(){
      return scrollToNewSection($('#sectional .open').prev())
    }
  });

  $('input').on('keyup change', function(){
    $(this).closest($('.valid')).removeClass('valid');
  });

  function validateEmpty(section){
    var errors = 0;
    section.find($('.required-field')).each(function(){
      var $this = $(this),
        input = $this.find($('input'));
      if (input.val() === ""){
        errors++;
        $this.addClass('field-error');
        $this.append('\<div class="form-error-msg">This field is required!\</div>');
      }
    });
    if (errors > 0){
      section.removeClass('valid');
      return false;
    }
    section.find($('.field-error')).each(function(){
      $(this).removeClass('field-error');
    });
    section.find($('.form-error-msg')).each(function(){
      $(this).remove();
    });
    section.addClass('valid');
    return true;
  }

  function scrollToNewSection(section){
    var top = section.offset().top;
    $("html, body").animate({
      scrollTop: top
    }, '1000');
    return true;
  }
});