Bootstrap Snippet Form Validation Error using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*!  
 * 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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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');
                }
            },
        });
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Form Validation Error"
Bootstrap 3.3.0 Snippet by yorihaput

Related: See More

Questions / Comments:

"Form Validation Error" Bootstrap 3.3.0 Snippet by yorihaput

Related: See More

Questions / Comments:

"Form Validation Error"
Bootstrap 3.3.0 Snippet by yorihaput