i have a multi step form of three steps and its working fine. Now , i want to add validations in it, especially for radio button. In first step, there is a radio button with eight options, and same in second step and in third field there are some input options.
here is my html:
<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" class="event-details" placeholder="Event Location" />
</div>
<div class="col-md-6 my-2">
<input type="text" name="date" class="event-details" placeholder="Event Date" />
</div>
<div class="col-md-6 my-2">
<input type="text" name="name" class="event-details" placeholder="Name" />
</div>
<div class="col-md-6 my-2">
<input type="text" name="email" class="event-details" placeholder="Email Id" />
</div>
<div class="col-md-6 my-2">
<input type="text" name="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>
here is my script:
//jQuery time
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(){
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+')',
'position': 'absolute'
});
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;
})
please help me out, thanks in advance