Multi step form with progress bar and validation
This is continuity of my previous similar post Multi step form with bootstrap and jquery.
So whats new in this post ? This post comes with few UI changes and the most important, integrated famous jquery form validation plugin.
Script comes with bootstrap ui design, which you might find confusing is you are already using any other UI library or your custom user interface. Never mind here i am posting plain code which you can copy and change as per your needs and there is download button also to download beautified version.
Basic version
|
1 2 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script> |
|
1 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
$(document).ready(function(){ var current = 1; widget = $(".step"); btnnext = $(".next"); btnback = $(".back"); btnsubmit = $(".submit"); // Init buttons and UI widget.not(':eq(0)').hide(); hideButtons(current); setProgress(current); // Next button click action btnnext.click(function(){ if(current < widget.length){ // Check validation if($(".form").valid()){ widget.show(); widget.not(':eq('+(current++)+')').hide(); setProgress(current); } } hideButtons(current); }) // Back button click action btnback.click(function(){ if(current > 1){ current = current - 2; if(current < widget.length){ widget.show(); widget.not(':eq('+(current++)+')').hide(); setProgress(current); } } hideButtons(current); }) // Submit button click btnsubmit.click(function(){ alert("Submit button clicked"); }); $('.form').validate({ // initialize plugin ignore:":not(:visible)", rules: { name : "required" }, }); }); // Change progress bar action setProgress = function(currstep){ var percent = parseFloat(100 / widget.length) * currstep; percent = percent.toFixed(); $(".progress-bar").css("width",percent+"%").html(percent+"%"); } // Hide buttons according to the current step hideButtons = function(current){ var limit = parseInt(widget.length); $(".action").hide(); if(current < limit) btnnext.show(); if(current > 1) btnback.show(); if (current == limit) { btnnext.hide(); btnsubmit.show(); } } |
Demo/Download Beautified version
[sociallocker]Basic DemoAdvanced Demo Download
[/sociallocker]
[…] View updated version with form and validation Multi step form with progress bar and validation […]
data not show after download script
Very nice! Thank you! The only thing I’m getting is the buttons submit the form when they are inside of the form. Other than that, this is awesome! Thanks for sharing. 🙂
[…] This post is inspired by Amit Patil […]
Thanks for the script. if I use radio buttons it does not check for required. any ideas on that?
Chris, I am using http://jqueryvalidation.org/ jquery validation plugin, Please read their docs for solution.
Will do, thanks!
Hi,
I would like to use your script in my booking system but I have a problem. I’m using datepicker to set a date field but the calendar is shown with the css style of your script and I don’t still found where I can change it.
Can you help me, please? (I’m not really expert on css)
Ricardo,
Can you please setup a demo, otherwise i wouldn’t be able to figure out whats the problem.
Data not showing in last step after downloading,
Replace this line:
console.log($(this).find(“label:not(.control-label)”).html($(“#”+$(this).data(“id”)).val()));
Fot this line:
console.log($(this).parent().find(“label:not(.control-label)”).html($(“#” + $(this).data(“id”)).val()));
I love your script, it does what i looking for. But on last page (at the Confirm Details) i didn’t see any details i was type. Thanks
Replace this line:
console.log($(this).find(“label:not(.control-label)”).html($(“#”+$(this).data(“id”)).val()));
Fot this line:
console.log($(this).parent().find(“label:not(.control-label)”).html($(“#” + $(this).data(“id”)).val()));
How would you get the data-id to work on the confirm details for radio buttons? I am having an issue getting the selected radio button value to display on the confirm details page when I have nine radio button options for data-id “type”.
Hi, I must say fantastic script!
But i have a problem, when i press submit it should send the form to an e-mail. How do i have to configurate the emailaddress?
Thanks in advance