Bootstrap Wizard

Wizard Snippet
· 4.80/5 (66 Reviews)

MIT License

20,891 Downloads
82 Comments
Regular Support
Lifetime Updates
Release: 3 years ago
Update: 9 months ago
Icon html
Icon bootstrap
Product certified by: Creative Tim

We are here to help you!

82 Web Developers commented on this product

Report issue

ajeet.pathak
  • downloaded
2 years ago

Thanks for the awesome stuff. Good base to start learning for getting things done. :)

axelut
  • owner

@ajeet.pathak you're welcome!
2 years ago

Nate 2 years ago

Thanks

axelut
  • owner

@Nate you're welcome!
2 years ago

Nate 2 years ago

Thanks

nissay99
  • downloaded
2 years ago

hello, thanks a lot for your great work. Please when I validate inputs in the first step (index pass to 2) I can't validate the second even the third one beacause $(".wizard-card form").valid() becomes always valid evenc if rules in the second or the third is not valid!!!!! thanks in advance for your help

aadbergman
  • downloaded

Hello @nissay99 , I have the same issue. Do you have a solution yet? regards - Aad
2 years ago

jagdeep
  • downloaded

I have the same issue. Do you have a solution yet?
2 years ago

nissay99
  • downloaded

hello, sorry @aadbergman i've just received an email telling me that there is a comment on mine. @jagdeep, well these is the answer of what I did: if(index == 1){ return validateFirstStep(); } else if(index == 2){ return validateFirstStep(); } else if(index == 3){ return validateFirstStep(); } ............. } //etc. I wanna mean just put all your validation inputs in one and same function (validateFirstStep()) that will be called on any tab change and will just validate inputs in the current tab(the previous are already validated before you pass to the next tab).
2 years ago

nissay99
  • downloaded

I am sorry I don't speak English very well to explain clearly, I hope it's clear for you @aadbergman and @jagdeep
2 years ago

axelut
  • owner

@nissay99 it looks like your solution is good, we will make these updates in the next release so everybody will get them. @aadbergman and @jagdeep please use this solution.
2 years ago

jagdeep
  • downloaded

cheer :) thanks dear nissay99 got it its working now. one more if you can help. Iin last step there is finish button that is also no validating fields.
2 years ago

nissay99
  • downloaded

@axelut thanks a lot. @jagdeep you wanna mean validating fields in the last tab after clicking the finish button? if so, just do the same thing as I mentioned bfore(put your validation in the validateFirstStep() function). I hope it's helpful. @jagdeep If there is any thing I can help you with don't hesitate to ask :)
2 years ago

shue.umañaguzman
  • downloaded

i fix the problem, here's the code. 1- u have to change the code 'onNext' to this onNext: function(tab, navigation, index){ if(!$(".wizard-card form").valid()){ //form is invalid return false; } return true; } 2- u have to do only one rules and messages code. example. var rules = { rules: { type_client:"required", firstname: "required", lastname: "required", id_number: "required", email: { required: true, email: true } }, messages: { type_client:"Selecciona un tipo de cliente porfavor", firstname: "Please enter your First Name", lastname: "Please enter your Last Name", email: "Please enter a valid email address", id_number: "Pleas enter a valid ID" } }; 3-after that call this method $(".wizard-card form").validate(rules); thats all.
1 year ago

andrewsopoku6
  • downloaded

I am having this same issue. can anyone help me?
1 year ago

gregoryfontenele
  • downloaded
2 years ago

Very good, Thanks!!!

traduccionesvalguer
  • downloaded
2 years ago

Thank you SO very much for this awesome work. This is just what I was looking for!

sayutin
  • downloaded
1 year ago

Это просто находка

joshua.bedford
  • downloaded
1 year ago

@axelut how would one go about adding another tab? I can duplicate the 'li' by the header and it will add another item, but when I duplicate the tab-pane div (and everything in it) it messes everything up. I've looked through the .js files but I'm not seeing the option to add a tab!

joshua.bedford
  • downloaded

I found the problem. Line 122 of my page (156 of your demo page) there is a typo <labe> which was never closed out (supposed to be <label>). Overall an awesome job on this piece, @axelut!
1 year ago

axelut
  • owner

Anonymous Tim glad that you like our products. Thank you for pointing out, we will have a look and fix that issue. Happy New Year!
1 year ago

parham.zare
  • downloaded
1 year ago

Nice Wizard Thank you Good Luck

axelut
  • owner

@parham.zare thank you!
1 year ago

karel.groot19
  • downloaded
1 year ago

Hello everyone, I have everything working based on reading the comments. One thing I'm not able to figure out is "how to implement the date picker" into the form.

axelut
  • owner

@karel.groot19 thank you for using our product. Can you give us more details about the datepicker that you are using what exactly is not working? Best, Alex!
1 year ago

You have to be logged in to post a comment. Login here.

Why our customers appreciate us

Design Quality

Perfecto, bien estructurado claro y conciso. Es compatible con cualquier flujo y proceso. Muy fácil de adaptar con los ejemplos.

Feature Availability

Design Quality