Q:

Radio button validation in multi step form

I am trying to use validations in my multi step form, when I am using validations, it works fine with input fields in last step but the problem is that, in first and second step I am using radio options and I am trying to  use validation there so that without selecting any option one cannot move to next step. 

$(document).ready(function() {
  jQuery('#sucess').hide();
  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(event) {

    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'
    });
  });

  $("#msform").submit(function() {

    var location = jQuery('#location').val();
    if ($.trim(location).length == 0) {
      document.getElementById("location").style.borderColor = "#E34234";
      jQuery('.fs-error').html('<span style="color:red;"> Please Enter Your Location !</span>');
      jQuery('.fs-error').show();
      return false;
    }

    var date = jQuery('#date').val();
    if ($.trim(date).length == 0) {
      document.getElementById("date").style.borderColor = "#E34234";
      jQuery('.fs-error').html('<span style="color:red;"> Please Enter the Date !</span>');
      jQuery('.fs-error').show();
      return false;
    }

    var name = jQuery('#name').val();
    if ($.trim(name).length == 0) {
      document.getElementById("name").style.borderColor = "#E34234";
      jQuery('.fs-error').html('<span style="color:red;"> Please Enter Your Name !</span>');
      jQuery('.fs-error').show();
      return false;
    }

    var email = jQuery('#email').val();
    if ($.trim(email).length == 0) {
      document.getElementById("email").style.borderColor = "#E34234";
      jQuery('.fs-error').html('<span style="color:red;"> Please Enter Your Email !</span>');
      jQuery('.fs-error').show();
      return false;
    }

    var phone = jQuery('#phone').val();
    if ($.trim(phone).length == 0) {
      document.getElementById("phone").style.borderColor = "#E34234";
      jQuery('.fs-error').html('<span style="color:red;"> Please Enter Your Phone Number !</span>');
      jQuery('.fs-error').show();
      return false;
    }

  });


});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<form id="msform" method="POST" action="abc.php">
  <!-- progressbar -->
  <ul id="progressbar">
    <li class="active"></li>
    <li></li>
    <li></li>
  </ul>
  <!-- fieldsets -->
  <fieldset>
    <div class="row">
      <div class="col-md-6 my-2">
        <div class='btns'>
          <label>
                              <input name="artist" type='radio'>
                                <span class='btn first'>Singers</span>
                            </label>
        </div>
      </div>

      <div class="col-md-6 my-2">
        <div class='btns'>
          <label>
                              <input name="artist" type='radio'>
                                <span class='btn'>Bands</span>
                            </label>
        </div>
      </div>

      <div class="col-md-6 my-2">
        <div class='btns'>
          <label>
                              <input name="artist" type='radio'>
                                <span class='btn'>Rappers</span>
                            </label>
        </div>
      </div>

      <div class="col-md-6 my-2">
        <div class='btns'>
          <label>
                              <input name="artist" type='radio'>
                                <span class='btn'>Djs</span>
                            </label>
        </div>
      </div>

      <div class="col-md-6 my-2">
        <div class='btns'>
          <label>
                              <input name="artist" type='radio'>
                                <span class='btn'>Comedians</span>
                            </label>
        </div>
      </div>

      <div class="col-md-6 my-2">
        <div class='btns'>
          <label>
                              <input name="artist" type='radio'>
                                <span class='btn'>Motivational Speakers</span>
                            </label>
        </div>
      </div>

      <div class="col-md-6 my-2">
        <div class='btns'>
          <label>
                              <input name="artist" type='radio'>
                                <span class='btn'>Dancers</span>
                            </label>
        </div>
      </div>

      <div class="col-md-6 my-2">
        <div class='btns'>
          <label>
                              <input name="artist" type='radio'>
                                <span class='btn'>Actors</span>
                            </label>
        </div>
      </div>
    </div>
    <input type="button" name="next" class="next action-button" value="NEXT" />
  </fieldset>


  <fieldset>
    <h5 class="concierge-mobile desktop-view">Celeb Concierge</h5>
    <h2 class="artist-type">Type of Event</h2>
    <div class="row">
      <div class="col-md-6 my-2">
        <div class='btns'>
          <label>
                              <input name="event" type='radio'>
                                <span class='btn first'>Wedding</span>
                            </label>
        </div>
      </div>

      <div class="col-md-6 my-2">
        <div class='btns'>
          <label>
                              <input name="event" type='radio'>
                                <span class='btn'>Private Party</span>
                            </label>
        </div>
      </div>

      <div class="col-md-6 my-2">
        <div class='btns'>
          <label>
                              <input name="event" type='radio'>
                                <span class='btn'>Brand Launch</span>
                            </label>
        </div>
      </div>

      <div class="col-md-6 my-2">
        <div class='btns'>
          <label>
                              <input name="event" type='radio'>
                                <span class='btn'>Corporate Get-Together</span>
                            </label>
        </div>
      </div>

      <div class="col-md-6 my-2">
        <div class='btns'>
          <label>
                              <input name="event" type='radio'>
                                <span class='btn'>Collegue Event</span>
                            </label>
        </div>
      </div>

      <div class="col-md-6 my-2">
        <div class='btns'>
          <label>
                              <input name="event" type='radio'>
                                <span class='btn'>Charity</span>
                            </label>
        </div>
      </div>

      <div class="col-md-6 my-2">
        <div class='btns'>
          <label>
                              <input name="event" type='radio'>
                                <span class='btn'>Photo/Video Shoot</span>
                            </label>
        </div>
      </div>

      <div class="col-md-6 my-2">
        <div class='btns'>
          <label>
                              <input name="event" type='radio'>
                                <span class='btn'>Concert</span>
                            </label>
        </div>
      </div>
    </div>
    <input type="button" name="previous" class="previous action-button" value="BACK" />
    <input type="button" name="next" class="next action-button" value="NEXT" />
  </fieldset>


  <fieldset>
    <h5 class="concierge-mobile desktop-view">Celeb Concierge</h5>
    <h2 class="artist-type">Type of Event</h2>
    <div class="row">
      <div class="col-md-12 my-2">
        <h6 class="budget">Budget</h6>
        <div class="rangeslider">
          <input class="min" name="range_1" type="range" min="1" max="100" value="10" />
          <input class="max" name="range_1" type="range" min="1" max="100" value="90" />
          <span class="range_min light left">10.000</span>
          <span class="range_max light right">90.000</span>
        </div>
      </div>
      <div class="col-md-6 my-2">
        <input type="text" name="location" id="location" class="event-details" placeholder="Event Location" />
      </div>
      <div class="col-md-6 my-2">
        <input type="text" name="date" id="date" class="event-details" placeholder="Event Date" />
      </div>
      <div class="col-md-6 my-2">
        <input type="text" name="name" id="name" class="event-details" placeholder="Name" />
      </div>
      <div class="col-md-6 my-2">
        <input type="text" name="email" id="email" class="event-details" placeholder="Email Id" />
      </div>
      <div class="col-md-6 my-2">
        <input type="text" name="phone" id="phone" class="event-details" placeholder="Phone Number" />
      </div>
    </div>
    <input type="button" name="previous" class="previous action-button" value="BACK" />
    <button class="book-button" type="submit">SUBMIT</button>
  </fieldset>

</form>

Thanks in advance.

A:

Here your complete code. 

<html>
 <head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
 </head>
 <body>
  <form id="msform" method="POST" action="abc.php">
     <!-- progressbar -->
     <ul id="progressbar">
     <li>Step1</li>
     <li>Step2</li>
     <li>Step3</li>
     </ul>
     
     <!-- error messages -->
     <span class="fs-error"></span>
     
     <!-- fieldsets -->
     <fieldset>
     <div class="row">
     <div class="col-md-6 my-2">
     <div class='btns'>
        <label>
        <input name="artist" type='radio'>
        <span class='btn first'>Singers</span>
        </label>
     </div>
     </div>
     <div class="col-md-6 my-2">
     <div class='btns'>
        <label>
        <input name="artist" type='radio'>
        <span class='btn'>Bands</span>
        </label>
     </div>
     </div>
     <div class="col-md-6 my-2">
     <div class='btns'>
        <label>
        <input name="artist" type='radio'>
        <span class='btn'>Rappers</span>
        </label>
     </div>
     </div>
     <div class="col-md-6 my-2">
     <div class='btns'>
        <label>
        <input name="artist" type='radio'>
        <span class='btn'>Djs</span>
        </label>
     </div>
     </div>
     <div class="col-md-6 my-2">
     <div class='btns'>
        <label>
        <input name="artist" type='radio'>
        <span class='btn'>Comedians</span>
        </label>
     </div>
     </div>
     <div class="col-md-6 my-2">
     <div class='btns'>
        <label>
        <input name="artist" type='radio'>
        <span class='btn'>Motivational Speakers</span>
        </label>
     </div>
     </div>
     <div class="col-md-6 my-2">
     <div class='btns'>
        <label>
        <input name="artist" type='radio'>
        <span class='btn'>Dancers</span>
        </label>
     </div>
     </div>
     <div class="col-md-6 my-2">
     <div class='btns'>
        <label>
        <input name="artist" type='radio'>
        <span class='btn'>Actors</span>
        </label>
     </div>
     </div>
     </div>
     <input type="button" name="next" class="next action-button" value="NEXT" />
     </fieldset>
     <fieldset>
     <h5 class="concierge-mobile desktop-view">Celeb Concierge</h5>
     <h2 class="artist-type">Type of Event</h2>
     <div class="row">
     <div class="col-md-6 my-2">
     <div class='btns'>
        <label>
        <input name="event" type='radio'>
        <span class='btn first'>Wedding</span>
        </label>
     </div>
     </div>
     <div class="col-md-6 my-2">
     <div class='btns'>
        <label>
        <input name="event" type='radio'>
        <span class='btn'>Private Party</span>
        </label>
     </div>
     </div>
     <div class="col-md-6 my-2">
     <div class='btns'>
        <label>
        <input name="event" type='radio'>
        <span class='btn'>Brand Launch</span>
        </label>
     </div>
     </div>
     <div class="col-md-6 my-2">
     <div class='btns'>
        <label>
        <input name="event" type='radio'>
        <span class='btn'>Corporate Get-Together</span>
        </label>
     </div>
     </div>
     <div class="col-md-6 my-2">
     <div class='btns'>
        <label>
        <input name="event" type='radio'>
        <span class='btn'>Collegue Event</span>
        </label>
     </div>
     </div>
     <div class="col-md-6 my-2">
     <div class='btns'>
        <label>
        <input name="event" type='radio'>
        <span class='btn'>Charity</span>
        </label>
     </div>
     </div>
     <div class="col-md-6 my-2">
     <div class='btns'>
        <label>
        <input name="event" type='radio'>
        <span class='btn'>Photo/Video Shoot</span>
        </label>
     </div>
     </div>
     <div class="col-md-6 my-2">
     <div class='btns'>
        <label>
        <input name="event" type='radio'>
        <span class='btn'>Concert</span>
        </label>
     </div>
     </div>
     </div>
     <input type="button" name="previous" class="previous action-button" value="BACK" />
     <input type="button" name="next" class="next action-button" value="NEXT" />
     </fieldset>
     <fieldset>
     <h5 class="concierge-mobile desktop-view">Celeb Concierge</h5>
     <h2 class="artist-type">Type of Event</h2>
     <div class="row">
     <div class="col-md-12 my-2">
     <h6 class="budget">Budget</h6>
     <div class="rangeslider">
        <input class="min" name="range_1" type="range" min="1" max="100" value="10" />
        <input class="max" name="range_1" type="range" min="1" max="100" value="90" />
        <span class="range_min light left">10.000</span>
        <span class="range_max light right">90.000</span>
     </div>
     </div>
     <div class="col-md-6 my-2">
     <input type="text" name="location" id="location" class="event-details" placeholder="Event Location" />
     </div>
     <div class="col-md-6 my-2">
     <input type="text" name="date" id="date" class="event-details" placeholder="Event Date" />
     </div>
     <div class="col-md-6 my-2">
     <input type="text" name="name" id="name" class="event-details" placeholder="Name" />
     </div>
     <div class="col-md-6 my-2">
     <input type="text" name="email" id="email" class="event-details" placeholder="Email Id" />
     </div>
     <div class="col-md-6 my-2">
     <input type="text" name="phone" id="phone" class="event-details" placeholder="Phone Number" />
     </div>
     </div>
     <input type="button" name="previous" class="previous action-button" value="BACK" />
     <button class="next" type="submit">SUBMIT</button>
     </fieldset>
  </form>
 </body>
 <script>
  $(document).ready(function() {
    
    $(".next").click(function(event) {
   var current_index = $(this).parent().index("fieldset");
   
   if(validateStep(current_index)){
    makeStepActive(current_index+1);
   }else{
    event.preventDefault();
   }
    });

    $(".previous").click(function() {
   var current_index = $(this).parent().index("fieldset");
   makeStepActive(current_index - 1);
    });

   makeStepActive(0); 
   
  });
 
  function makeStepActive(index){
   var step = $("#progressbar li:eq("+index+")");
   var feildset = $("fieldset:eq("+index+")");
   if(step.length){
    $("#progressbar li").hide();
    $("fieldset").hide();
    step.show();
    feildset.slideDown(500);
   }
  }
 
  function validateStep(step){
   switch(step){
    case 0:
     if(($("input[name='artist']:checked").length === 0)){
      alert('select any artist!');
      return false;
     }
     return true;
    break;
    case 1:
     if(($("input[name='event']:checked").length === 0)){
      alert('select any event!');
      return false;
     }
     return true;
    break;
    default:
     var ids = ['location', 'date', 'name', 'email', 'phone'];
     var err = [];
     ids.forEach(function(id, i){
      var value = $("#"+id).val();
      if ($.trim(value).length === 0) {
        document.getElementById(id).style.borderColor = "#E34234";
        err.push('Please Enter Your '+id);
      }
     });
     
     if(err.length > 0){
      $('.fs-error').html('<span style="color:red;">'+err.join('!<br>')+'</span>');
      $('.fs-error').show();
      return false;
     }else{
      return true;
     }
   }
  }
  
 </script>
 
</html>

Note: Always write minimal code to make it easier to understand by others. 

