Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"Form Wizard and validation"
Bootstrap 3.3.0 Snippet by
FatemaEL
3.3.0
jQuery
Preview
HTML
CSS
JS
View Full Screen
Forked from
Fork
Fork this
Parent
235
 
0 Fav
Post to Facebook
Tweet this
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="stepwizard"> <div class="stepwizard-row setup-panel"> <div class="stepwizard-step"> <a href="#step-1" type="button" class="btn btn-primary btn-circle">1</a> <p>Entreprise</p> </div> <div class="STEPWIZARD-step"> <a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a> <p>Données banqaires</p> </div> <div class="stepwizard-step"> <a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a> <p>Piéces jointe</p> </div> </div> </div> <form role="form"> <div class="row setup-content" id="step-1"> <div class="col-xs-12"> <div class="col-md-12"> <h3> Votre Entreprise </h3> <div class="form-group"> <label class="control-label">Type d'activité</label> <input maxlength="100" type="text" required="required" class="form-control" placeholder="Entrer type d'activité" /> </div> <div class="form-group"> <label class="control-label">Forme juridique</label> <input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter forme juidique" /> </div> <div class="form-group"> <label class="control-label">Identifiant fiscale</label> <input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter identifiant fiscale" /> </div> <div class="form-group"> <label class="control-label">Registre commercial</label> <input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter registre commercial" /> </div> <div class="form-group"> <label class="control-label">Numéro CNSS</label> <input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter numero CNSS" /> </div> </div> <div class="form-group"> <label class="control-label">Adresse du siège</label> <input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter numero CNSS" /> </div> <h3> Représentant légal de l'entreprise </h3> <div class="form-group"> <label class="control-label">ICE</label> <input maxlength="100" type="text" required="required" class="form-control" placeholder="Entrer ICE" /> </div> <button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button> </div> </div> <div class="row setup-content" id="step-2"> <div class="col-xs-12"> <div class="col-md-12"> <h3>Données banquaires</h3> <div class="form-group"> <label class="control-label">Titulaire du compte</label> <input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter titulaire du compte" /> </div> <div class="form-group"> <label class="control-label">Nom de la banque</label> <input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter nom de la banque" /> </div> <div class="form-group"> <label class="control-label">Code BIC</label> <input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter code BIC" /> </div> <div class="form-group"> <label class="control-label">Adresse de la banque</label> <input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter adresse de la banque" /> </div> <button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button> </div> </div> </div> <div class="row setup-content" id="step-3"> <div class="col-xs-12"> <div class="col-md-12"> <h3> Step 3</h3> <button class="btn btn-success btn-lg pull-right" type="submit">Finish!</button> </div> </div> </div> </form> </div>
body{ margin-top:40px; } .stepwizard-step p { margin-top: 10px; } .stepwizard-row { display: table-row; } .stepwizard { display: table; width:70%; position: relative; margin-left:15%; } .stepwizard-step button[disabled] { opacity: 1 !important; filter: alpha(opacity=100) !important; } .stepwizard-row:before { top: 14px; bottom: 0; position: absolute; content: " "; width: 100%; height: 1px; background-color: #ccc; z-order: 0; } .stepwizard-step { display: table-cell; text-align: center; position: relative; } .btn-circle { width: 30px; height: 30px; text-align: center; padding: 6px 0; font-size: 12px; line-height: 1.428571429; border-radius: 15px; } .btn-primary { color: rgb(255, 255, 255); background-color: #ffc000; border-color: Black; } .btn-primary:hover{ color: rgb(255, 255, 255); background-color: Black; border-color: #ffc000; }
$(document).ready(function () { var navListItems = $('div.setup-panel div a'), allWells = $('.setup-content'), allNextBtn = $('.nextBtn'); allWells.hide(); navListItems.click(function (e) { e.preventDefault(); var $target = $($(this).attr('href')), $item = $(this); if (!$item.hasClass('disabled')) { navListItems.removeClass('btn-primary').addClass('btn-default'); $item.addClass('btn-primary'); allWells.hide(); $target.show(); $target.find('input:eq(0)').focus(); } }); allNextBtn.click(function(){ var curStep = $(this).closest(".setup-content"), curStepBtn = curStep.attr("id"), nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"), curInputs = curStep.find("input[type='text'],input[type='url']"), isValid = true; $(".form-group").removeClass("has-error"); for(var i=0; i<curInputs.length; i++){ if (!curInputs[i].validity.valid){ isValid = false; $(curInputs[i]).closest(".form-group").addClass("has-error"); } } if (isValid) nextStepWizard.removeAttr('disabled').trigger('click'); }); $('div.setup-panel div a.btn-primary').trigger('click'); });
Related:
See More
Template
Material Kit PRO BS3
448.3K
44
login-form
165.5K
18
Login Form
139.1K
51
Contact Form
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76