I'm running some tests with a script where the user can only go to the next step if the corresponding checkbox is checked, I got the help from @Sam to make this configuration, but now I have a layout problem, unconfigured and I confess I did not understand why. I'm using a page from a framework that I acquired that can be seen here:
My page is like this, 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();
The image of how the layout is with the code inserted looks like this:
Butitshouldlooklikethis:
Ithinktheproblemisinthissection,butIcouldnotsolveit,ifIcommentonthatpartthelayoutiscorrectbutthefunctionalityislost.
$('.form-bootstrapWizard').bootstrapWizard({onNext:function(){setTimeout(function(){checks.trigger("change");
}, 100);
return verifica();
},
onTabClick: function(){
return verifica();
}
});