<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 ---------->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap-wizard/1.2/jquery.bootstrap.wizard.min.js"></script>
<div class="container">
<form action="#" id="form-wizard" class="form-validation" role="form" method="post" accept-charset="utf-8">
<div class="row">
<div class="col-sm-12">
<div id="bs-wizard" class="sw-main sw-theme-arrows">
<ul>
<li><a href="#tab1" data-toggle="tab">Welcome<br /><small>Step 1</small></a></li>
<li><a href="#tab2" data-toggle="tab">Akun<br /><small>Step 2</small></a></li>
<li><a href="#tab3" data-toggle="tab">Profile<br /><small>Step 3</small></a></li>
<li><a href="#tab4" data-toggle="tab">Alamat<br /><small>Step 4</small></a></li>
<li><a href="#tab5" data-toggle="tab">Finish<br /><small>Step 5</small></a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab1">
<h2>Welcome</h2>
<div class="form-group">
<h4>
Halo selamat datang di SIPOL tampaknya kami tidak menemukan User Admin untuk dapat memulai aplikasi ini setidaknya kami harus menemukan 1 User Admin. Silahkan klik next untuk memulai mengisi data
</h4>
</div>
</div>
<div class="tab-pane" id="tab2">
<h2>Profile</h2>
<div class="form-group">
<div class="prepend-icon">
<input type="text" name="username" id="username" class="form-control form-white username" placeholder="Username" required>
<i class="icon-user"></i>
</div>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<div class="prepend-icon">
<input type="email" name="email" id="email" class="form-control form-white email" placeholder="Email" required>
<i class="icon-envelope"></i>
</div>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<div class="prepend-icon">
<input type="password" name="password" id="password" class="form-control form-white password" placeholder="Password" required>
<i class="icon-lock"></i>
</div>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<div class="prepend-icon m-b-10" >
<input type="password" name="password2" id="password2" class="form-control form-white password2" placeholder="Repeat Password" required>
<i class="icon-lock"></i>
</div>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="tab-pane" id="tab3">
<h2>Profile</h2>
<div class="row">
<div class="col-lg-12 form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">NIK</label>
<div class="col-sm-9">
<input name="nik" class="form-control form-white" type="text" placeholder="NIK" data-mask="9999999999999999" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Nama Lengkap</label>
<div class="col-sm-9">
<input name="nama" class="form-control form-white" type="text" placeholder="Nama Lengkap" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Tempat Lahir</label>
<div class="col-sm-9">
<input name="tempat_lahir" class="form-control form-white" type="text" placeholder="Tempat Lahir" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Tanggal Lahir</label>
<div class="col-sm-9">
<input name="tanggal_lahir" class="b-datepicker form-control form-white" type="text" placeholder="DD-MM-YYYY" data-mask="99-99-9999" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Jenis Kelamin</label>
<div class="col-sm-9">
<div class="input-group">
<div class="icheck-inline">
<label class="">
<input type="radio" name="jenkel" data-radio="iradio_minimal-blue" required style="position: absolute; opacity: 0;" value="L" checked="checked">
Pria
</label>
<label class="">
<input type="radio" name="jenkel" data-radio="iradio_minimal-blue" required style="position: absolute; opacity: 0;" value="P">
Wanita
</label>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Kontak</label>
<div class="col-sm-9">
<input name="nohp" class="form-control form-white" type="text" required placeholder="Kontak" data-mask="089999999999" >
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Pekerjaan</label>
<div class="col-sm-9">
<input name="pekerjaan" class="form-control form-white" type="text" required placeholder="Pekerjaan" >
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Instansi Tempat Bekerja</label>
<div class="col-sm-9">
<input name="tempat_kerja" class="form-control form-white" type="text" required placeholder="Instansi Tempat Bekerja" >
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab4">
<h2>Alamat</h2>
<div class="row">
<div class="col-lg-12 form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">Alamat</label>
<div class="col-sm-9">
<input name="alamat" class="form-control form-white" type="text" placeholder="Alamat" required >
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Kecamatan</label>
<div class="col-sm-9">
<input name="kecamatan" class="form-control form-white" type="text" placeholder="Kecamatan" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Kota</label>
<div class="col-sm-9">
<input name="kota" class="form-control form-white" type="text" placeholder="Kota" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Provinsi</label>
<div class="col-sm-9">
<input name="provinsi" class="form-control form-white" type="text" placeholder="Provinsi" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Kode Pos</label>
<div class="col-sm-9">
<input name="kodepos" class="form-control form-white" type="text" placeholder="Kodepos" data-mask="99999" required>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab5">
<h2>Terms and Conditions</h2>
<p>
Terms and conditions: Keep your smile :)
</p>
<div class="form-group">
<label for="terms">I agree with the T&C</label>
<input type="checkbox" id="terms" data-error="Please accept the Terms and Conditions" required>
<div class="help-block with-errors"></div>
</div>
</div>
<ul class="pager wizard">
<li class="previous first" style="display:none;"><a href="#">First</a></li>
<li class="previous"><a href="#">Previous</a></li>
<li class="next last" style="display:none;"><a href="#">Last</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
</div>
</div>
</div>
</div>
</form>
</div>
/*!
* SmartWizard v4.x
* jQuery Wizard Plugin
* http://www.techlaboratory.net/smartwizard
*
* Created by Dipu Raj
* http://dipuraj.me
*
* Licensed under the terms of MIT License
* https://github.com/techlab/SmartWizard/blob/master/LICENSE
*/
/* SmartWizard Basic CSS */
.sw-main {
position: relative;
display: block;
margin: 0;
padding: 0;
}
.sw-main .sw-container {
display: block;
margin: 0;
padding: 0;
position: relative;
}
.sw-main .step-content {
display: none;
position: relative;
margin: 0;
}
.sw-main .sw-toolbar {
margin-left: 0;
}
/* SmartWizard Theme: White */
.sw-theme-default {
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
}
.sw-theme-default .sw-container {
min-height: 250px;
}
.sw-theme-default .step-content {
padding: 10px;
border: 0px solid #D4D4D4;
background-color: #FFF;
text-align: left;
}
.sw-theme-default .sw-toolbar {
background: #f9f9f9;
border-radius: 0 !important;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 0 !important;
}
.sw-theme-default .sw-toolbar-top {
border-bottom-color: #ddd !important;
}
.sw-theme-default .sw-toolbar-bottom {
border-top-color: #ddd !important;
}
.sw-theme-default > ul.step-anchor > li > a, .sw-theme-default > ul.step-anchor > li > a:hover {
border: none !important;
color: #bbb;
text-decoration: none;
outline-style: none;
background: transparent !important;
border: none !important;
}
.sw-theme-default > ul.step-anchor > li.clickable > a:hover {
color: #4285F4 !important;
background: transparent !important;
}
.sw-theme-default > ul.step-anchor > li > a::after {
content: "";
background: #4285F4;
/* #5bc0de #4285F4*/
height: 2px;
position: absolute;
width: 100%;
left: 0px;
bottom: 0px;
-webkit-transition: all 250ms ease 0s;
transition: all 250ms ease 0s;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
.sw-theme-default > ul.step-anchor > li.active > a {
border: none !important;
color: #4285F4 !important;
background: transparent !important;
}
.sw-theme-default > ul.step-anchor > li.active > a::after {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.sw-theme-default > ul.step-anchor > li.done > a {
border: none !important;
color: #000 !important;
background: transparent !important;
}
.sw-theme-default > ul.step-anchor > li.done > a::after {
background: #5cb85c;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.sw-theme-default > ul.step-anchor > li.danger > a {
border: none !important;
color: #d9534f !important;
background: transparent !important;
}
.sw-theme-default > ul.step-anchor > li.danger > a::after {
background: #d9534f;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.sw-theme-default > ul.step-anchor > li.disabled > a, .sw-theme-default > ul.step-anchor > li.disabled > a:hover {
color: #eee !important;
}
.sw-nav-tabs {
border-bottom: 1px solid #ddd;
}
.sw-nav-tabs > li {
float: left;
margin-bottom: -1px;
}
.sw-nav-tabs > li > a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}
.sw-nav-tabs > li > a:hover {
border-color: #eee #eee #ddd;
}
.sw-nav-tabs > li.active > a,
.sw-nav-tabs > li.active > a:hover,
.sw-nav-tabs > li.active > a:focus {
color: #555;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
/* Responsive CSS */
@media screen and (max-width: 768px) {
.sw-theme-default > .sw-nav-tabs > li {
float: none !important;
}
}
/* Loader Animation
Courtesy: http://bootsnipp.com/snippets/featured/loading-button-effect-no-js
*/
@-webkit-keyframes ld {
0% {
-webkit-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
}
50% {
-webkit-transform: rotate(180deg) scale(1.1);
transform: rotate(180deg) scale(1.1);
}
100% {
-webkit-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}
}
@keyframes ld {
0% {
-webkit-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
}
50% {
-webkit-transform: rotate(180deg) scale(1.1);
transform: rotate(180deg) scale(1.1);
}
100% {
-webkit-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}
}
.sw-theme-default > ul.step-anchor > li.loading:before {
content: '';
display: inline-block;
position: absolute;
background: transparent;
border-radius: 50%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: 2px solid #fff;
border-top-color: transparent;
border-bottom-color: transparent;
border-left-color: #4285f4;
border-right-color: #4285f4;
top: 50%;
left: 50%;
margin-top: -16px;
margin-left: -16px;
width: 32px;
height: 32px;
-webkit-animation: ld 1s ease-in-out infinite;
animation: ld 1s ease-in-out infinite;
}
/*!
* SmartWizard v4.x
* jQuery Wizard Plugin
* http://www.techlaboratory.net/smartwizard
*
* Created by Dipu Raj
* http://dipuraj.me
*
* Licensed under the terms of MIT License
* https://github.com/techlab/SmartWizard/blob/master/LICENSE
*/
/* SmartWizard Theme: Arrows */
.sw-theme-arrows {
border-radius: 5px;
border: 1px solid #ddd;
}
.sw-theme-arrows > .sw-container {
min-height: 200px;
}
.sw-theme-arrows .step-content {
padding: 0 10px;
border: 0px solid #D4D4D4;
background-color: #FFF;
text-align: left;
}
.sw-theme-arrows .sw-toolbar {
padding-left: 10px;
padding-right: 10px;
margin-bottom: 0 !important;
border-radius: 5px;
}
.sw-theme-arrows > .sw-toolbar-top {
}
.sw-theme-arrows > .sw-toolbar-bottom {
}
.sw-theme-arrows > ul.step-anchor {
display: block;
border: 0;
border-bottom: 1px solid #ddd;
padding: 0px;
background: #f5f5f5;
border-radius: 5px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
list-style: none;
overflow: hidden;
/*margin: -1px -1px 0 -1px -1px;*/;
}
.sw-theme-arrows > ul.step-anchor li+li:before {
padding: 0;
}
.sw-theme-arrows > ul.step-anchor > li {
}
.sw-theme-arrows > ul.step-anchor > li > a, .sw-theme-arrows > ul.step-anchor > li > a:hover {
color: #bbb;
text-decoration: none;
padding: 10px 0 10px 45px;
position: relative;
display: block;
border: 0 !important;
border-radius: 0;
outline-style: none;
background: #f5f5f5;
}
.sw-theme-arrows > ul.step-anchor > li > a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid #f5f5f5;
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.sw-theme-arrows > ul.step-anchor > li > a:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
/* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid #ddd;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
.sw-theme-arrows > ul.step-anchor > li:first-child > a {
padding-left: 15px;
}
.sw-theme-arrows > ul.step-anchor > li > a:hover {
color: #bbb;
text-decoration: none;
outline-style: none;
background: #f5f5f5;
border-color: #f5f5f5;
}
.sw-theme-arrows > ul.step-anchor > li > a:hover:after {
border-left-color: #f5f5f5;
}
.sw-theme-arrows > ul.step-anchor > li > a small {
}
.sw-theme-arrows > ul.step-anchor > li.clickable > a:hover {
color: #4285F4 !important;
background: #46b8da !important;
}
.sw-theme-arrows > ul.step-anchor > li.active > a {
border-color: #5bc0de !important;
color: #fff !important;
background: #5bc0de !important;
}
.sw-theme-arrows > ul.step-anchor > li.active > a:after {
border-left: 30px solid #5bc0de !important;
}
.sw-theme-arrows > ul.step-anchor > li.done > a {
border-color: #5cb85c !important;
color: #fff !important;
background: #5cb85c !important;
}
.sw-theme-arrows > ul.step-anchor > li.done > a:after {
border-left: 30px solid #5cb85c;
}
.sw-theme-arrows > ul.step-anchor > li.danger > a {
border-color: #d9534f !important;
color: #d9534f !important;
background: #fff !important;
}
.sw-theme-arrows > ul.step-anchor > li.danger > a:after {
border-left: 30px solid #fff;
}
.sw-theme-arrows > ul.step-anchor > li.disabled > a, .sw-theme-arrows > ul.step-anchor > li.disabled > a:hover {
color: #eee !important;
}
/* Responsive CSS */
@media screen and (max-width: 768px) {
.sw-theme-arrows > ul.step-anchor {
border: 0;
background: #ddd !important;
}
.sw-theme-arrows > .sw-nav-tabs > li {
float: none !important;
margin-bottom: 0;
}
.sw-theme-arrows > ul.step-anchor > li > a, .sw-theme-arrows > ul.step-anchor > li > a:hover {
padding-left: 15px;
margin-right: 0;
margin-bottom: 1px;
}
.sw-theme-arrows > ul.step-anchor > li > a:after, .sw-theme-arrows > ul.step-anchor > li > a:before {
display: none;
}
}
/* Loader Animation
Courtesy: http://bootsnipp.com/snippets/featured/loading-button-effect-no-js
*/
@-webkit-keyframes ld {
0% {
-webkit-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
}
50% {
-webkit-transform: rotate(180deg) scale(1.1);
transform: rotate(180deg) scale(1.1);
}
100% {
-webkit-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}
}
@keyframes ld {
0% {
-webkit-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
}
50% {
-webkit-transform: rotate(180deg) scale(1.1);
transform: rotate(180deg) scale(1.1);
}
100% {
-webkit-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}
}
.sw-theme-arrows > ul.step-anchor > li.loading:before {
content: '';
display: inline-block;
position: absolute;
background: transparent;
border-radius: 50%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: 2px solid #fff;
border-top-color: transparent;
border-bottom-color: transparent;
border-left-color: #4285f4;
border-right-color: #4285f4;
top: 50%;
left: 50%;
margin-top: -16px;
margin-left: -16px;
width: 32px;
height: 32px;
z-index: 99;
-webkit-animation: ld 1s ease-in-out infinite;
animation: ld 1s ease-in-out infinite;
}
function formWizard(){
$('#bs-wizard').bootstrapWizard({
'tabClass': 'nav sw-nav-tabs step-anchor',
'onNext': function(tab, navigation, index) {
alert("call the formValidation function and return value to $valid")
//It must call a formValidation function
//and teturn the value in $valid
//var $valid = "true/false";
//if(!$valid) {
// return false;
//}else{
// $(tab).addClass("done");
//}
},
'onTabClick' : function(tab, navigation, index, clickIndex) {
if(clickIndex>index){
alert("call the formValidation function and return value to $valid")
//It must call a formValidation function
//and teturn the value in $valid
//var $valid = "true/false";
//if(!$valid) {
//Focusing Invalid
// return false;
//}
}
},
'onTabShow': function(tab, navigation, index) {
if ($(tab).hasClass("danger")){
$(tab).removeClass('danger');
};
if ($(tab).hasClass("done")){
$(tab).removeClass('done');
}
},
});
}
function formValidation(){
if($('.form-validation').length && $.fn.validate){
/* We add an addition rule to show you. Example : 4 + 8. You can other rules if you want */
$.validator.methods.operation = function(value, element, param) {
return value == param;
};
$.validator.methods.customemail = function(value, element) {
return /^([-0-9a-zA-Z.+_]+@[-0-9a-zA-Z.+_]+\.[a-zA-Z]{2,4})+$/.test(value);
};
$('.form-validation').each(function(){
var formValidator = $(this).validate({
success: "valid",
submitHandler: function() { alert("Form is valid! We submit it") },
errorClass: "form-error",
validClass: "form-success",
errorElement: "div",
ignore: [],
rules: {
avatar: {extension:"jpg|png|gif|jpeg|doc|docx|pdf|xls|rar|zip"},
password2: {equalTo: '#password'},
calcul: {operation: 12},
url: {url: true},
email: {
required: {
depends:function(){
$(this).val($.trim($(this).val()));
return true;
}
},
customemail: true
},
},
messages:{
name: {required: 'Enter your name'},
lastname: {required: 'Enter your last name'},
firstname: {required: 'Enter your first name'},
email: {required: 'Enter email address', customemail: 'Enter a valid email address'},
language: {required: 'Enter your language'},
mobile: {required: 'Enter your phone number'},
avatar: {required: 'You must upload your avatar'},
password: {required: 'Write your password'},
password2: {required: 'Write your password',equalTo: '2 passwords must be the same'},
calcul: {required: 'Enter the result of 4 + 8',operation: 'Result is false. Try again!'},
terms: {required: 'You must agree with terms'}
},
highlight: function(element, errorClass, validClass) {
$(element).closest('.form-control').addClass(errorClass).removeClass(validClass);
},
unhighlight: function(element, errorClass, validClass) {
$(element).closest('.form-control').removeClass(errorClass).addClass(validClass);
},
errorPlacement: function(error, element) {
if (element.hasClass("custom-file") || element.hasClass("checkbox-type") || element.hasClass("language")) {
element.closest('.option-group').after(error);
}
else if (element.is(":radio") || element.is(":checkbox")) {
element.closest('.option-group').after(error);
}
else if (element.parent().hasClass('input-group')) {
element.parent().after(error);
}
else{
error.insertAfter(element);
}
},
invalidHandler: function(event, validator) {
var errors = validator.numberOfInvalids();
}
});
return formValidator.valid();
$(".form-validation .cancel").click(function() {
formValidator.resetForm();
});
});
}
}
$(document).ready(function () {
formWizard();
formValidation();
});
