Bootstrap Wizard

Wizard Snippet
· 4.80/5 (96 Reviews)

MIT License

25,923 Downloads
106 Comments
Regular Support
Lifetime Updates
Release: 4 years ago
Update: 1 year ago
Product certified by: Creative Tim

We are here to help you!

106 Web Developers commented on this product

Report issue

ajeet.pathak
  • downloaded
3 years ago

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

alexpaduraru
  • owner

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

Nate 2 years ago

Thanks

alexpaduraru
  • 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

alexpaduraru
  • 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.
2 years ago

andrewsopoku6
  • downloaded

I am having this same issue. can anyone help me?
2 years 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
2 years ago

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

joshua.bedford
  • downloaded
2 years ago

@alexpaduraru 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!
2 years ago

alexpaduraru
  • 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!
2 years ago

parham.zare
  • downloaded
2 years ago

Nice Wizard Thank you Good Luck

alexpaduraru
  • owner

@parham.zare thank you!
2 years ago

karel.groot19
  • downloaded
2 years 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.

alexpaduraru
  • 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!
2 years ago

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

Why our customers appreciate us

Design Quality

Design Quality

Design Quality

grate work :)