3

Estou realizando alguns testes com um script onde o usuário só poderá seguir para o próximo passo se o checkbox correspondente estiver marcado, consegui com a ajuda do @Sam realizar essa configuração, mas agora estou com um problema no layout, o mesmo ficou desconfigurado e confesso não entendi o porque. Estou usando uma página de um framework que adquiri que pode ser visto aqui:

SmartAdmin - Wizard

A minha página está assim, o html

        <div class="row">
        <div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
            <h1 class="page-title txt-color-blueDark"><i class="fa fa-pencil-square-o fa-fw "></i> Termo de Uso</h1>
        </div>
    </div>
    <section id="widget-grid" class=""> 
        <div class="row">
            <article class="col-sm-12 col-md-12 col-lg-6">
                <div class="jarviswidget jarviswidget-color-darken" id="wid-id-0" data-widget-editbutton="false" data-widget-deletebutton="false">
                    <header>
                        <span class="widget-icon"> <i class="fa fa-check"></i> </span>
                        <h2>Termo de Adesão </h2>               
                    </header>
                    <div>
                        <div class="jarviswidget-editbox">
                        </div>
                        <div class="widget-body">               
                            <div class="row">
                                <form id="wizard-1" novalidate="novalidate">
                                    <div id="bootstrap-wizard-1" class="col-sm-12">
                                        <div class="form-bootstrapWizard">
                                          <ul class="bootstrapWizard form-wizard">
                                            <li class="active" data-target="#tab1">
                                                <a href="#tab1" data-toggle="tab"> <span class="step">1</span> <span class="title">Termo 1</span> </a>
                                            </li>
                                            <li data-target="#tab2" class="disabled">
                                                <a href="#tab2" data-toggle="tab"> <span class="step">2</span> <span class="title">Termo 2</span> </a>
                                            </li>
                                            <li data-target="#tab3" class="disabled">
                                                <a href="#tab3" data-toggle="tab"> <span class="step">3</span> <span class="title">Termo 3</span> </a>
                                            </li>
                                            <li data-target="#tab4" class="disabled">
                                                <a href="#tab4" data-toggle="tab"> <span class="step">4</span> <span class="title">Salvar</span> </a>
                                            </li>
                                        </ul>
                                            <div class="clearfix"></div>
                                        </div>

                                        <div class="tab-content">
                                            <div class="tab-pane active" id="tab1">
                                                <br>
                                                <h3><strong>Termo 1 </strong> - Uso da Internet </h3>


                                                <div class="row">                                                               
                                                    <div class="col-sm-12">                                                                 
                                                        <h3>TERMO DE AJUSTE DE PROCEDIMENTO RELATIVO AO USO DE INTERNET E SEUS ASSESSÓRIOS DENTRO DA EMPRESA</h3>
                                                        <p> A EMPRESA empresa empregadora nos termos do artigo 3º da CLT, considerando que e o acesso à Internet por ela disponibilizada em todos os seus departamentos e setores, tem a finalidade de atender exclusivamente assuntos relativos às atividades profissionais de seus funcionários junto a associados, clientes, fornecedores e assessores, INFORMA que a partir de novembro de 2013, ativará em sua rede um equipamento UTM (Unified Threat Management), que possibilitará à EMPRESA, dentre outras funções de segurança, o controle/fiscalização de todos os acessos a Internet efetuados pelos seus colaboradores, fazendo-o em nome da segurança de dados, procedimentos, proteção à sua marca e nome no mercado.</p>
                                                        <p>Serve o presente termo para dar ciência a cada um dos usuários/funcionários da introdução tecnológica de segurança ora efetivada, não podendo os precitados usuários, alegarem desconhecimento sobre o tema ora tratado.</p>
                                                        <p>O sistema implantado, não tem o fito fiscalizar e nem controlará e-mails pessoais dos trabalhadores, ficando restrito aos sítios eletrônicos acessados pelo colaborador. Para atendimento do caput do artigo 468 da CLT o funcionário/usuário aceitará eletronicamente o presente Termo.</p>
                                                        <p>O presente Termo de Ajuste, não revoga as normas relativas ao uso de Internet e seus assessórios dispostas no Regulamento Interno e Código de Ética da EMPRESA em vigor.</p>
                                                        <br />                                                                      
                                                    </div>                                                              
                                                </div>

                                                <div class="row">
                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            <div class="input-group">
                                                                <div class="checkbox">
                                                                    <label>
                                                                        <input name="CheckTermo1" type="checkbox" class="checkbox style-0" id="CheckTermo1" value="0" required>
                                                                        <span>Aceito os termos do serviço</span> 
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            <div class="input-group">
                                                                <span class="input-group-addon"><i class="fa fa-calendar fa-fw"></i></span>
                                                                <input class="form-control " placeholder="Data" type="text" name="datat1" id="datat1" readonly>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="tab-pane" id="tab2">
                                                <br>
                                                <h3><strong>Termo 2</strong> - Acesso a Dados</h3>

                                                <div class="row">                                                               
                                                    <div class="col-sm-12">                                                                 
                                                        <h3>TERMO DE AJUSTE DE PROCEDIMENTO RELATIVO AO USO DE INTERNET E SEUS ASSESSÓRIOS DENTRO DA EMPRESA</h3>
                                                        <p> A EMPRESA empresa empregadora nos termos do artigo 3º da CLT, considerando que e o acesso à Internet por ela disponibilizada em todos os seus departamentos e setores, tem a finalidade de atender exclusivamente assuntos relativos às atividades profissionais de seus funcionários junto a associados, clientes, fornecedores e assessores, INFORMA que a partir de novembro de 2013, ativará em sua rede um equipamento UTM (Unified Threat Management), que possibilitará à EMPRESA, dentre outras funções de segurança, o controle/fiscalização de todos os acessos a Internet efetuados pelos seus colaboradores, fazendo-o em nome da segurança de dados, procedimentos, proteção à sua marca e nome no mercado.</p>
                                                        <p>Serve o presente termo para dar ciência a cada um dos usuários/funcionários da introdução tecnológica de segurança ora efetivada, não podendo os precitados usuários, alegarem desconhecimento sobre o tema ora tratado.</p>
                                                        <p>O sistema implantado, não tem o fito fiscalizar e nem controlará e-mails pessoais dos trabalhadores, ficando restrito aos sítios eletrônicos acessados pelo colaborador. Para atendimento do caput do artigo 468 da CLT o funcionário/usuário aceitará eletronicamente o presente Termo.</p>
                                                        <p>O presente Termo de Ajuste, não revoga as normas relativas ao uso de Internet e seus assessórios dispostas no Regulamento Interno e Código de Ética da EMPRESA em vigor.</p>
                                                        <br />                                                                      
                                                    </div>                                                              
                                                </div>                                                          
                                                <div class="row">
                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            <div class="input-group">
                                                                <div class="checkbox">
                                                                    <label>
                                                                        <input name="CheckTermo2" type="checkbox" class="checkbox style-0" id="CheckTermo2" value="0" required>
                                                                        <span>Aceito os termos do serviço</span> 
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            <div class="input-group">
                                                                <span class="input-group-addon"><i class="fa fa-calendar fa-fw"></i></span>
                                                                <input class="form-control " placeholder="Data" type="text" name="datat2" id="datat2" readonly>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>                                                          
                                            </div>                                                      
                                            <div class="tab-pane" id="tab3">
                                                <br>
                                                <h3><strong>Termo 3</strong> - Uso da Internet</h3>

                                                <div class="row">                                                               
                                                    <div class="col-sm-12">                                                                 
                                                        <h3>TERMO DE AJUSTE DE PROCEDIMENTO RELATIVO AO USO DE INTERNET E SEUS ASSESSÓRIOS DENTRO DA EMPRESA</h3>
                                                        <p> A EMPRESA empresa empregadora nos termos do artigo 3º da CLT, considerando que e o acesso à Internet por ela disponibilizada em todos os seus departamentos e setores, tem a finalidade de atender exclusivamente assuntos relativos às atividades profissionais de seus funcionários junto a associados, clientes, fornecedores e assessores, INFORMA que a partir de novembro de 2013, ativará em sua rede um equipamento UTM (Unified Threat Management), que possibilitará à EMPRESA, dentre outras funções de segurança, o controle/fiscalização de todos os acessos a Internet efetuados pelos seus colaboradores, fazendo-o em nome da segurança de dados, procedimentos, proteção à sua marca e nome no mercado.</p>
                                                        <p>Serve o presente termo para dar ciência a cada um dos usuários/funcionários da introdução tecnológica de segurança ora efetivada, não podendo os precitados usuários, alegarem desconhecimento sobre o tema ora tratado.</p>
                                                        <p>O sistema implantado, não tem o fito fiscalizar e nem controlará e-mails pessoais dos trabalhadores, ficando restrito aos sítios eletrônicos acessados pelo colaborador. Para atendimento do caput do artigo 468 da CLT o funcionário/usuário aceitará eletronicamente o presente Termo.</p>
                                                        <p>O presente Termo de Ajuste, não revoga as normas relativas ao uso de Internet e seus assessórios dispostas no Regulamento Interno e Código de Ética da EMPRESA em vigor.</p>
                                                        <br />                                                                      
                                                    </div>                                                              
                                                </div>                                                          
                                                <div class="row">
                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            <div class="input-group">
                                                                <div class="checkbox">
                                                                    <label>
                                                                        <input name="CheckTermo3" type="checkbox" class="checkbox style-0" id="CheckTermo3" value="0" required>
                                                                        <span>Aceito os termos do serviço</span> 
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            <div class="input-group">
                                                                <span class="input-group-addon"><i class="fa fa-calendar fa-fw"></i></span>
                                                                <input class="form-control " placeholder="Data" type="text" name="datat3" id="datat3" readonly>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>                                                          
                                            </div>  

                                            <div class="tab-pane" id="tab4">
                                                <br>
                                                <h3><strong>Step 4</strong> - Save Form</h3>
                                                <br>
                                                <h1 class="text-center text-success"><strong><i class="fa fa-check fa-lg"></i> Complete</strong></h1>
                                                <h4 class="text-center">Click next to finish</h4>
                                                <br>
                                                <br>
                                            </div>  

                                            <div class="form-actions">
                                                <div class="row">
                                                    <div class="col-sm-12">
                                                        <ul class="pager wizard no-margin">         
                                                            <li class="previous disabled"><a href="javascript:void(0);" class="btn btn-lg btn-default"> Anterior </a></li>                                  
                                                            <li class="next"> <a href="javascript:void(0);" class="btn btn-lg txt-color-darken"> Próximo </a> </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </article>
    </section>

O script

    pageSetUp();

var pagefunction = function() {

    loadScript("js/plugin/bootstrap-wizard/jquery.bootstrap.wizard.min.js", runBootstrapWizard);

    function runBootstrapWizard() { 

        // COMEÇO DO SCRIT
        $(document).ready(function() {

           var checks = $(".checkbox[name^=CheckTermo]");

            $('.form-bootstrapWizard').bootstrapWizard({
              onNext: function(){
                 setTimeout(function(){
                    checks.trigger("change");
                 }, 100);
                 return verifica();
              },
              onTabClick: function(){
                 return verifica();
              }
           });

           function verifica(){
              var tab_ativa = $(".tab-content .active");
              var check = tab_ativa.find(".checkbox[name^=CheckTermo]");

              if( check.is(':checked') ){
                 $(".next").removeClass("disabled");
                 $(".form-wizard .active").next().removeClass("disabled");
                 return true;
              }else{
                 $(".next").addClass("disabled");
                 $(".form-wizard .active").prev().addClass("disabled");
                 return false;
              }
           }

           checks.on("change", verifica);
           checks.trigger("change");

        });
        // FIM DO SCRIPT

        $("#CheckTermo1").click(function () {  
          if($("#CheckTermo1").is(':checked')){               
            var d = new Date();
            dataHora = (d.toLocaleString());    
            // Mostrando data no campo              
            $('#datat1').val(dataHora);                                                     
          } else {
            // Mostrando data no campo              
            $('#datat1').val("");                   
          }
        }); 

        $("#CheckTermo2").click(function () {  
          if($("#CheckTermo2").is(':checked')){               
            var d = new Date();
            dataHora = (d.toLocaleString());    
            // Mostrando data no campo              
            $('#datat2').val(dataHora);                                                     
          } else {
            // Mostrando data no campo              
            $('#datat2').val("");                   
          }
        });

        $("#CheckTermo3").click(function () {  
          if($("#CheckTermo3").is(':checked')){               
            var d = new Date();
            dataHora = (d.toLocaleString());    
            // Mostrando data no campo              
            $('#datat3').val(dataHora);                                                     
          } else {
            // Mostrando data no campo              
            $('#datat3').val("");                   
          }
        });     

        var $validator = $("#wizard-1").validate({
            rules : {                   
                CheckTermo1: {
                    required : true
                },
                CheckTermo2: {
                    required : true
                },  
                CheckTermo3: {
                    required : true
                }
            },
            messages : {                    
                CheckTermo1 : "Informe o check 1",
                CheckTermo2 : "Informe o check 2",
                CheckTermo3 : "Informe o check 3"                   
            },
            highlight : function(element) {
                $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
            },
            unhighlight : function(element) {
                $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
            },
            errorElement : 'span',
            errorClass : 'help-block',
            errorPlacement : function(error, element) {
                if (element.parent('.input-group').length) {
                    error.insertAfter(element.parent());
                } else {
                    error.insertAfter(element);
                }
            }
        });

        $('#bootstrap-wizard-1').bootstrapWizard({

            'tabClass' : 'form-wizard',
            'onNext' : function(tab, navigation, index) {
                var $valid = $("#wizard-1").valid();
                if (!$valid) {
                    $validator.focusInvalid();
                    return false;
                } else {
                    $('#bootstrap-wizard-1').find('.form-wizard').children('li').eq(index - 1).addClass('complete');
                    $('#bootstrap-wizard-1').find('.form-wizard').children('li').eq(index - 1).find('.step').html('<i class="fa fa-check"></i>');
                }
            }
        });

    };

    // load fuelux wizard

    loadScript("js/plugin/fuelux/wizard/wizard.min.js", fueluxWizard);      
    function fueluxWizard() {
        var wizard = $('.wizard').wizard();
        wizard.on('finished', function(e, data) {
            $("#fuelux-wizard").submit();
            console.log("submitted!");
            $.smallBox({
                title : "Congratulations! Your form was submitted",
                content : "<i class='fa fa-clock-o'></i><i>1 seconds ago...</i>",
                color : "#5F895F",
                iconSmall : "fa fa-check bounce animated",
                timeout : 4000
            });

        });

    };

};

// end pagefunction

// Load bootstrap wizard dependency then run pagefunction
pagefunction();

A imagem de como o layout está com o código inserido está assim:

inserir a descrição da imagem aqui

Mas deveria estar assim:

inserir a descrição da imagem aqui

Creio que o problema esteja nesse trecho, mas não consegui resolver, se comento esse parte o layout fica correto mas a funcionalidade se perde.

$('.form-bootstrapWizard').bootstrapWizard({
          onNext: function(){
             setTimeout(function(){
                checks.trigger("change");
             }, 100);
             return verifica();
          },
          onTabClick: function(){
             return verifica();
          }
       });
9
  • Vc já tentou remover o JS temporariamente para ver se o CSS volta a ficar correto?
    – hugocsl
    17/12/2018 às 12:19
  • Sim, se removo ele o layout fica correto @hugocsl, não coloquei isso na pergunta. 17/12/2018 às 12:25
  • 1
    Então veja se vc não precisou muda alguma tag tipo de li para span ou algo do tipo, ou se vc precisou "encapsular" um ul dentro de um div ou algo assim. Pq esse tipo de coisa costuma quebrar regras css do tipo container > filho ai se vc coloca um elemento entre um e outro quebra a regra css tipo container div > filho ai o css deixa de ser aplicado corretamente entende
    – hugocsl
    17/12/2018 às 12:28
  • 1
    Já testou sem o setTimeout? Tipo apenas ... onNext: function(){ checks.trigger("change"); return verifica(); }, ...
    – hugocsl
    17/12/2018 às 17:19
  • 1
    Olá @hugocsl, acabe de retira essa parte do código e continua do mesmo jeito, coisa estranha. 17/12/2018 às 17:29

1 Resposta 1

5
+50

O problema é que o Wizard usa um tipo de classe padrão chamada nav nav-pills (você pode conferir na documentação).

Para usar os métodos (que são as linhas que você comenta e o layout fica correto), é preciso alterar também o valor da opção tabClass do componente, para não que não sejam aplicadas as classes citadas, que são a causa da distorção no layout.

Para isso basta adicionar a opção tabClass e deixar ela sem valor:

$('.form-bootstrapWizard').bootstrapWizard({
   tabClass: null, // ←←←←←←←←←←←←←←←←←←←←←←←←←← AQUI
   onNext: function(){
      setTimeout(function(){
         checks.trigger("change");
      }, 100);
      return verifica();
   },
   onTabClick: function(){
      return verifica();
   }
});
1
  • 1
    Fantástico, muito obrigado @Sam, confesso que tinha pesquisado mas sem sucesso, valeu pela paciência e grande dica. 20/12/2018 às 10:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .