Thanks for your nice wizard
Could you please help me if I want to change the direction of levels from right to left??!
Thanks in advance
maria12 (-1) - 6 years ago - Reply -1
My problem is the buttons not working and images not change the point of wizard. I filled all fields in the first tab but not work...buttons and images. I think is the place where I copied the JS code. Help me !!!
andreboni1966 (-2) - 6 years ago - Reply -2
Hi, All
Where in my HTML file I include the JS statements ?
Thks
André
andreboni1966 (-2) - 6 years ago - Reply 0
Hi Its very nice , can u please guide me to download the files.......its really imp to me thank you dude
ravitanuku () - 6 years ago - Reply 0
<form role="form" id="teste">
<div class="wizard"> .....
$(document).ready(function () {
var $validator = $("#teste").validate({
rules: {
exampleInputEmail1: {
required: true
},
exampleInputEmail1: {
required: true
},
exampleInputEmail1: {
required: true
}
},
messages: {
exampleInputEmail1: "* Selecione um tipo de averbação",
exampleInputEmail1: "* Informe um local de averbação",
exampleInputEmail1: "* Informe um curso de averbação",
},
highlight: function (element) {
$(element).closest('.form-group').removeClass('has-success').addClass('has-error')
$(element).parent().find('.form-control-feedback').removeClass('glyphicon-ok').addClass('glyphicon-remove');
},
unhighlight: function (element) {
$(element).closest('.form-group').removeClass('has-error').addClass('has-success');
$(element).parent().find('.form-control-feedback').removeClass('glyphicon-remove').addClass('glyphicon-ok');
},
//errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function (error, element) {
if (element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
}
});
$(".next-step").click(function (e) {
var $valid = $("#teste").valid();
var $active = $('.wizard .nav-tabs li.active');
if(!$valid) {
$validator.focusInvalid();
return false;
}
$active.next().removeClass('disabled');
nextTab($active);
});
});
Modify according to your need
Canellas Sandro () - 6 years ago - Reply 0
One problem. It will highlight missing fields correctly but it will still let user to next phase. Howto modify that without missing fields you cannot proceed to next step?
tester () - 6 years ago - Reply 0
it looks okay but the continue buttons arent working. i am using it on asp.net, please help out
Pope Jubilate () - 6 years ago - Reply 0
Nice work, but the there is a problem with the glyphicons' alignment. They don't center; here is the code to fix:
span.round-tab i{
color:#555555;
position: relative;
top: 50%;
transform: translateY(-50%);
}
Martin P. () - 7 years ago - Reply 0
hey, did you have any trouble with the glyhicons aligning? See my post .
thanks
Martin P. () - 7 years ago - Reply 0
No trouble.
Check if you have a custom css rule on .glyphicon or i element ?
span.round-tab have 70px fixed size and line-height 70px, so glyphicon element is centered automatically
MeTaLiKiD () - 7 years ago - Reply 0
Can you send me the files, for some reason i cannot get it to work, i really like this here is my email, luke@mdxsolutions.co.uk
Luke101 () - 7 years ago - Reply 0
Please recheck your code :
this things is what you are miss : (bootstrap.min.css,jquery-1.11.1.min.js,bootstrap.min.js)
<link href="http://maxcdn.bootstrapcdn...." rel="stylesheet">
....
<script src="http://code.jquery.com/jque..."></script>
<script src="http://maxcdn.bootstrapcdn...."></script>
King GeneraL () - 7 years ago - Reply 0
