"Form Validation Error"
Bootstrap 3.3.0 Snippet by yorihaput

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

Related: See More


Questions / Comments: