Register Step!

by Rian .N Herdian

HTML

<form id="registerform" method="post" action="">
 
<div id="first-step">
    <input type="text" required name="nama" placeholder="Nama...">
</div> <!-- end first-step -->
 
<div id="second-step">
    <input type="email" required name="email" placeholder="E-mail...">
</div> <!-- end second-step -->
 
<div id="last-step">
    <input type="password" required name="pass" placeholder="Password...">
    <input type="submit" name="submit" id="submit" value="submit" />
</div> <!-- end last-step -->
 
</form>

CSS

form {
  display:block;
  margin:50px auto;
  width:400px;
}
form > div {
  display:block;
  background:#eee;
  padding:20px;
  position:relative;
}
form > div:before {
  display:block;
  content:'';
  background:#ccc;
  height:5px;
  position:absolute;
  top:0;
  left:0;
  transition:all .2s linear;
}
form > div#first-step:before {
  width:33.333%;
}
form > div#second-step:before {
  width:66.333%;
  background:orange;
}
form > div#last-step:before {
  width:100%;
  background:green;
}

JavaScript

var prevLink = '<a class="prev" href="#">&lsaquo; Prev</a>';
        var nextLink = '<a class="next" href="#">Next &rsaquo;</a>';
        var navHTML = '<div class="prev-next">' +
                         prevLink +
                         nextLink +
                      '</div>';
        $(function(){
            // init
            $('#registerform > div')
                .hide()
                .append(navHTML);
            $('#first-step .prev').remove();
            $('#last-step .next').remove();
 
            // show first step
            $('#first-step').show();
 
            $('a.next').click(function(){
                var whichStep = $(this).parent().parent().attr('id');
 
                if( whichStep == 'first-step' )
                {
                    // validate first-step
                }
                else if( whichStep == 'second-step' )
                {
                    // validate second-step
                }
                else if( whichStep == 'last-step' )
                {
                    // validate last-step
                }
 
                $(this).parent().parent().hide().next().show();
            });
 
            $('a.prev').click(function(){
                $(this).parent().parent().hide().prev().show();
            });
        });