title: Validation multiple buttons W/ Alert
body: <p>I'm trying to create a form that gathers information regarding users. The form has 5 steps:</p>
  
  <blockquote>
    <p>Step 1: User information (Name, email, phone, age, gender)</p>
    
    <p>Step 2: Yes or No question</p>
    
    <p>Step 3: Yes or No question</p>
    
    <p>Step 4: Yes or No question</p>
    
    <p>Step 5: Yes or No question</p>
  </blockquote>
  
  <p>The form allows users to go to the next stage, or go back to the previous step. </p>
  
  <p>Before allowing the user to move to the next step, the user must fulfill the requirement. The validation will Alert User if question is not answered.</p>
  
  <p>How do I add the verification code to my original <code>JavaScript</code>, so that each step could have animation and verification? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var current_fs, next_fs, previous_fs; //fieldsets
  var left, opacity, scale; //fieldset properties which we will animate
  var animating; //flag to prevent quick multi-click glitches
  
  $(".next").click(function(){
      document.getElementById('btnNext').addEventListener('click',
          function(){
              //text inputs
              if(!document.getElementById('fullname').value){
                  alert('Full Name is required');
                  return false;
              }
  
              else if(!document.getElementById('email').value){
                  alert('Email is required');
                  return false;
              }
  
              else if(!document.getElementById('phone').value){
                  alert('Phone Number is required');
                  return false;
              }
  
              else if(!document.getElementById('age').value){
                  alert('Age is required');
                  return false;
              }
  
              //radio buttons
              var genderSet = false;
              var genderBtns = document.getElementsByName('gender');
              //console.log(genderBtns);
              for(var i=0, btn; btn=genderBtns[i];++i){
                  if(btn.checked){
                      genderSet=true;
                      break;
                  }
              }
              if(!genderSet){
                  alert('Gender is required');
                  return false
              }
  
              if(animating) return false;
              animating = true;
  
              current_fs = $(this).parent();
              next_fs = $(this).parent().next();
  
              //activate next step on progressbar using the index of next_fs
              $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
  
              //show the next fieldset
              next_fs.show();
              //hide the current fieldset with style
              current_fs.animate({opacity: 0}, {
                  step: function(now, mx) {
                      //as the opacity of current_fs reduces to 0 - stored in "now"
                      //1. scale current_fs down to 80%
                      scale = 1 - (1 - now) * 0.2;
                      //2. bring next_fs from the right(50%)
                      left = (now * 50)+"%";
                      //3. increase opacity of next_fs to 1 as it moves in
                      opacity = 1 - now;
                      current_fs.css({'transform': 'scale('+scale+')'});
                      next_fs.css({'left': left, 'opacity': opacity});
                  },
                  duration: 800,
                  complete: function(){
                      current_fs.hide();
                      animating = false;
                  },
                  //this comes from the custom easing plugin
                  easing: 'easeInOutBack'
              });
          });
  });
  
  $(".previous").click(function(){
      if(animating) return false;
      animating = true;
  
      current_fs = $(this).parent();
      previous_fs = $(this).parent().prev();
  
      //de-activate current step on progressbar
      $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
  
      //show the previous fieldset
      previous_fs.show();
      //hide the current fieldset with style
      current_fs.animate({opacity: 0}, {
          step: function(now, mx) {
              //as the opacity of current_fs reduces to 0 - stored in "now"
              //1. scale previous_fs from 80% to 100%
              scale = 0.8 + (1 - now) * 0.2;
              //2. take current_fs to the right(50%) - from 0%
              left = ((1-now) * 50)+"%";
              //3. increase opacity of previous_fs to 1 as it moves in
              opacity = 1 - now;
              current_fs.css({'left': left});
              previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
          },
          duration: 800,
          complete: function(){
              current_fs.hide();
              animating = false;
          },
          //this comes from the custom easing plugin
          easing: 'easeInOutBack'
      });
  });
  
  $(".submit").click(function(){
      return false;
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!-- fieldsets --&gt;
  &lt;fieldset&gt;
      &lt;h2 class="fs-title"&gt;Step 1&lt;/h2&gt;
      &lt;h3 class="fs-subtitle"&gt;Background Information&lt;/h3&gt;
      &lt;input type="text" id="fullname" name="fullname" placeholder="Full Name"&gt;
      &lt;input type="text" id="email" name="email" placeholder="E-Mail"&gt;
      &lt;input type="text" id="phone" name="phone" placeholder="Phone"&gt;
      &lt;input type="number" id="age" name="age" placeholder="Age"&gt;
  
      &lt;h4&gt;Gender&lt;/h4&gt;
      &lt;div class="row"&gt;
          &lt;div&gt;
              &lt;input type="radio" name="gender" value="male" id="gender-male"/&gt;
              &lt;label for="gender-male"&gt;Male&lt;/label&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;input type="radio" name="gender" value="female" id="gender-female"/&gt;
              &lt;label for="gender-female"&gt;Female&lt;/label&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;h4&gt;Description&lt;/h4&gt;
          &lt;div class="input-group"&gt;
              &lt;label for="terms"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur adipiscing elit, sed do eiusmod tempor. &lt;/label&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;input type="button" name="next" id="btnNext" class="next action-button" value="Next" /&gt;
  &lt;/fieldset&gt;
  
  &lt;fieldset&gt;
      &lt;h2 class="fs-title"&gt;Step 2 &lt;/h2&gt;
      &lt;h3 class="fs-subtitle"&gt;Please select one of the following&lt;/h3&gt;
  
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  &lt;br&gt;
      &lt;div&gt;
          &lt;select name="past" id="past"&gt;
              &lt;option value=""disabled selected&gt;Select One&lt;/option&gt;
              &lt;option value="a"&gt;Yes&lt;/option&gt;
              &lt;option value="b"&gt;No&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
      &lt;br&gt;
      &lt;input type="button" name="previous" class="previous action-button" value="Previous" /&gt;
      &lt;input type="button" name="next" class="next action-button" id="PastNext" value="Next" /&gt;
  &lt;/fieldset&gt;
  
  &lt;fieldset&gt;
      &lt;h2 class="fs-title"&gt;Step 3&lt;/h2&gt;
      &lt;h3 class="fs-subtitle"&gt;Please select one of the following&lt;/h3&gt;
  
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      &lt;div&gt;
          &lt;select&gt;
              &lt;option value=""disabled selected&gt;Select One&lt;/option&gt;
              &lt;option value="a"&gt;Yes&lt;/option&gt;
              &lt;option value="b"&gt;No&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
      &lt;br&gt;
      &lt;input type="button" name="previous" class="previous action-button" value="Previous" /&gt;
      &lt;input type="button" name="next" class="next action-button" value="Next" /&gt;
  &lt;/fieldset&gt;
  &lt;fieldset&gt;
      &lt;h2 class="fs-title"&gt;Step 4&lt;/h2&gt;
      &lt;h3 class="fs-subtitle"&gt;Please select one of the following&lt;/h3&gt;
  
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      &lt;br&gt;
  
      &lt;div&gt;
          &lt;select&gt;
              &lt;option value=""disabled selected&gt;Select One&lt;/option&gt;
              &lt;option value="a"&gt;Yes&lt;/option&gt;
              &lt;option value="b"&gt;No&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
      &lt;br&gt;
      &lt;input type="button" name="previous" class="previous action-button" value="Previous" /&gt;
      &lt;input type="button" name="next" class="next action-button" value="Next" /&gt;
  &lt;/fieldset&gt;
  
  &lt;fieldset&gt;
      &lt;h2 class="fs-title"&gt;Step 5 &lt;/h2&gt;
      &lt;h3 class="fs-subtitle"&gt;Please select one of the following&lt;/h3&gt;
  
      Can you come to this location?&lt;br&gt; &lt;br&gt;
      &lt;br&gt;
  
      &lt;div&gt;
          &lt;select&gt;
              &lt;option value=""disabled selected&gt;Select One&lt;/option&gt;
              &lt;option value="a"&gt;Yes&lt;/option&gt;
              &lt;option value="b"&gt;No&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
      &lt;br&gt;&lt;br&gt;&lt;br&gt;
  
      &lt;div class="row"&gt;
          &lt;h4&gt;Terms and Conditions&lt;/h4&gt;
          &lt;div class="input-group"&gt;
              &lt;input id="terms" type="checkbox"&gt;
              &lt;label for="terms"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. &lt;/label&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;input type="button" name="previous" class="previous action-button" value="Previous" /&gt;
      &lt;input type="submit" name="submit" class="submit action-button" value="Submit" /&gt;
  &lt;/fieldset&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My verification code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#PastNext").click(function(event){
      var validate = $("#past").val();
      if(validate == "")
      {
          event.preventDefault();
          alert("You have not selected any option");
      } 
  });</code></pre>
  </div>
  </div>
  </p>