<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>Datos Personales</p> </div> <div class="stepwizard-step"> <a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a> <p>Documentos Personales</p> </div> <div class="stepwizard-step"> <a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a> <p>Informacion Laboral</p> </div> <div class="stepwizard-step"> <a href="#step-4" type="button" class="btn btn-default btn-circle" disabled="disabled">4</a> <p>Formas de Contactar</p> </div> <div class="stepwizard-step"> <a href="#step-4" type="button" class="btn btn-default btn-circle" disabled="disabled">5</a> <p>Contactos de Emergencia</p> </div> <div class="stepwizard-step"> <a href="#step-4" type="button" class="btn btn-default btn-circle" disabled="disabled">6</a> <p>Hijos:</p> </div> <div class="stepwizard-step"> <a href="#step-4" type="button" class="btn btn-default btn-circle" disabled="disabled">7</a> <p>Familiar Residente</p> </div> <div class="stepwizard-step"> <a href="#step-4" type="button" class="btn btn-default btn-circle" disabled="disabled">8</a> <p>Foto</p> </div> </div> </div> <br /> <form role="form" action="" method="post"> <div class="row setup-content" id="step-1"> <div class="col-xs-12"> <div class="col-md-3"> <div class="form-group"> <label class="control-label" style="font-size: 12px;">Nombres:</label> <input maxlength="100" type="text" required="required" class="form-control" placeholder="Nombres..." /> </div> <div class="form-group"> <label class="control-label" style="font-size: 12px;">Fecha de Nacimiento:</label> <input type="date" class="form-control" placeholder="Edad"> </div> </div> <div class="col-md-3"> <div class="form-group"> <label class="control-label" style="font-size: 12px;">Apellidos:</label> <input maxlength="100" type="text" required="required" class="form-control" placeholder="Apellidos..." /> </div> <div class="form-group"> <label class="control-label" style="font-size: 12px;">Edad:</label> <select class="form-control"> <option value="">Seleccione...</option> <option value="1 Año">1 Año</option> <option value="2 Años">2 Años</option> <option value="3 Años">3 Años</option> <option value="4 Años">4 Años</option> <option value="5 Años">5 Años</option> <option value="6 Años">6 Años</option> <option value="7 Años">7 Años</option> <option value="8 Años">8 Años</option> <option value="9 Años">9 Años</option> <option value="10 Años">10 Años</option> <option value="11 Años">11 Años</option> <option value="12 Años">12 Años</option> <option value="13 Años">13 Años</option> <option value="14 Años">14 Años</option> <option value="15 Años">15 Años</option> <option value="16 Años">16 Años</option> <option value="17 Años">17 Años</option> <option value="18 Años">18 Años</option> <option value="19 Años">19 Años</option> <option value="20 Años">20 Años</option> <option value="21 Años">21 Años</option> <option value="22 Años">22 Años</option> <option value="23 Años">23 Años</option> <option value="24 Años">24 Años</option> <option value="25 Años">25 Años</option> <option value="26 Años">26 Años</option> <option value="27 Años">27 Años</option> <option value="28 Años">28 Años</option> <option value="29 Años">29 Años</option> <option value="30 Años">30 Años</option> <option value="31 Años">31 Años</option> <option value="32 Años">32 Años</option> <option value="33 Años">33 Años</option> <option value="34 Años">34 Años</option> <option value="35 Años">35 Años</option> <option value="36 Años">36 Años</option> <option value="37 Años">37 Años</option> <option value="38 Años">38 Años</option> <option value="39 Años">39 Años</option> <option value="40 Años">40 Años</option> <option value="41 Años">41 Años</option> <option value="42 Años">42 Años</option> <option value="43 Años">43 Años</option> <option value="44 Años">44 Años</option> <option value="45 Años">45 Años</option> <option value="46 Años">46 Años</option> <option value="47 Años">47 Años</option> <option value="48 Años">48 Años</option> <option value="49 Años">49 Años</option> <option value="50 Años">50 Años</option> <option value="51 Años">51 Años</option> <option value="52 Años">52 Años</option> <option value="53 Años">53 Años</option> <option value="54 Años">54 Años</option> <option value="55 Años">55 Años</option> <option value="56 Años">56 Años</option> <option value="57 Años">57 Años</option> <option value="58 Años">58 Años</option> <option value="59 Años">59 Años</option> <option value="60 Años">60 Años</option> <option value="61 Años">61 Años</option> <option value="62 Años">62 Años</option> <option value="63 Años">63 Años</option> <option value="64 Años">64 Años</option> <option value="65 Años">65 Años</option> <option value="66 Años">66 Años</option> <option value="67 Años">67 Años</option> <option value="68 Años">68 Años</option> <option value="69 Años">69 Años</option> <option value="70 Años">70 Años</option> <option value="71 Años">71 Años</option> <option value="72 Años">72 Años</option> <option value="73 Años">73 Años</option> <option value="74 Años">74 Años</option> <option value="75 Años">75 Años</option> <option value="76 Años">76 Años</option> <option value="77 Años">77 Años</option> <option value="78 Años">78 Años</option> <option value="79 Años">79 Años</option> <option value="80 Años">80 Años</option> <option value="81 Años">81 Años</option> <option value="82 Años">82 Años</option> <option value="83 Años">83 Años</option> <option value="84 Años">84 Años</option> <option value="85 Años">85 Años</option> <option value="86 Años">86 Años</option> <option value="87 Años">87 Años</option> <option value="88 Años">88 Años</option> <option value="89 Años">89 Años</option> <option value="90 Años">90 Años</option> <option value="91 Años">91 Años</option> <option value="92 Años">92 Años</option> <option value="93 Años">93 Años</option> <option value="94 Años">94 Años</option> <option value="95 Años">95 Años</option> <option value="96 Años">96 Años</option> <option value="97 Años">97 Años</option> <option value="98 Años">98 Años</option> <option value="99 Años">99 Años</option> <option value="100 Años">100 Años</option> <option value="101 Años">101 Años</option> <option value="102 Años">102 Años</option> <option value="103 Años">103 Años</option> <option value="104 Años">104 Años</option> <option value="105 Años">105 Años</option> <option value="106 Años">106 Años</option> <option value="107 Años">107 Años</option> <option value="108 Años">108 Años</option> <option value="109 Años">109 Años</option> <option value="110 Años">110 Años</option> <option value="111 Años">111 Años</option> <option value="112 Años">112 Años</option> <option value="113 Años">113 Años</option> <option value="114 Años">114 Años</option> <option value="115 Años">115 Años</option> <option value="116 Años">116 Años</option> <option value="117 Años">117 Años</option> <option value="118 Años">118 Años</option> <option value="119 Años">119 Años</option> <option value="120 Años">120 Años</option> </select> </div> </div> <div class="col-md-3"> <div class="form-group"> <label class="control-label" style="font-size: 12px;">Sexo:</label> <select id="location" name="location" class="form-control"> <option value="">Seleccione...</option> <option value="Masculino">Masculino</option> <option value="Femenino">Femenino</option> </select> </div> <div class="form-group"> <label class="control-label" style="font-size: 12px;">Estado Civil en Paraguay:</label> <input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Last Name" /> </div> </div> <div class="col-md-3"> <div class="form-group"> <label class="control-label" style="font-size: 12px;">Lugar de Nacimiento:</label> <select id="location" name="location" class="form-control"> <option value="">Seleccione...</option> <option value="Quito">Quito</option> <option value="Guayaquil">Guayaquil</option> </select> </div> <div class="form-group"> <label class="control-label" style="font-size: 12px;">Estado Civil en lugar de Residencia::</label> <input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Last Name" /> </div> <button class="btn btn-primary nextBtn pull-right" type="button" >Guardar y Continuar</button> </div> </div> </div> <div class="row setup-content" id="step-2"> <div class="col-xs-12"> <div class="col-md-4"> <div class="form-group"> <label class="control-label">Cedula de Identidad:</label> <input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" /> </div> <div class="form-group"> <label class="control-label">Pasaporte Valido Hasta:</label> <input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" /> </div> </div> <div class="col-md-4"> <div class="form-group"> <label class="control-label">Tipo de Pasaporte::</label> <input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" /> </div> <div class="form-group"> <label class="control-label">Validez de Visa::</label> <input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" /> </div> </div> <div class="col-md-4"> <div class="form-group"> <label class="control-label">N° de Pasaporte:</label> <input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" /> </div> <div class="form-group"> <label class="control-label">Cuando vez:</label> <input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" /> </div> <button class="btn btn-primary nextBtn pull-right" type="button" >Guardar y Continuar</button> </div> </div> </div> <div class="row setup-content" id="step-3"> <div class="col-xs-12"> <div class="col-md-4"> <div class="form-group"> <label class="control-label">Profesion en Paraguay:</label> <input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" /> </div> <div class="form-group"> <label class="control-label">Ocupacion Actual:</label> <input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" /> </div> </div> <div class="col-md-4"> <div class="form-group"> <label class="control-label">Nombre de Firma Laboral:</label> <input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" /> </div> <div class="form-group"> <label class="control-label">Linea Baja:</label> <input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" /> </div> </div> <div class="col-md-4"> <div class="form-group"> <label class="control-label">Domicilio Laboral: (Detallar hasta el Barrio):</label> <textarea id="firstname" rows="5" name="firstname" type="text" placeholder="Unknown" class="form-control input-md" required=""></textarea> </div> <button class="btn btn-primary nextBtn pull-right" type="button" >Guardar y Continuar</button> </div> </div> </div> <div class="row setup-content" id="step-4"> <div class="col-xs-6 col-md-offset-3"> <div class="col-md-12"> <h3> Step 3</h3> <button class="btn btn-success btn-lg pull-right" type="submit">Submit</button> </div> </div> </div> <div class="row setup-content" id="step-4"> <div class="col-xs-6 col-md-offset-3"> <div class="col-md-12"> <h3> Step 3</h3> <button class="btn btn-success btn-lg pull-right" type="submit">Submit</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: 100%; position: relative; } .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; }

$(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'); });