bootstrap validator not working in my code(no errors thrown) but works on JSFiddle

Question

Everything works fine in this JSFiddle

However, when I am trying to use the same code inside my index.html and hit Request Data button, it's not working. The following is the code :

<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
        //BEGIN FORM Validations
        $('#validateForm').bootstrapValidator({
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {

                patientSets: {
                    validators: {
                        notEmpty: {
                            message: 'Please select a patient set'
                        }
                    }
                },
                titleOfResearchProject: {
                    validators: {
                        stringLength: {
                            min: 5,
                            message: 'Please Enter the title with minimum 5 letters length'
                        },
                        notEmpty: {
                            message: 'Please Enter title of your project'
                        }
                    }
                },

                descriptionOfResearchProject: {
                    validators: {
                        stringLength: {
                            min: 15,
                            max: 100,
                            message: 'Please enter at least 15 characters and no more than 100'
                        },
                        notEmpty: {
                            message: 'Please Enter Description'
                        }
                    }
                },
                intendedUse: {
                    validators: {
                        notEmpty: {
                            message: 'Please select one option'
                        }
                    }
                },
            }
});

        //END FORM Validations
    </script>
</head>
<body>
<div id="wrapper">

    <div id="page-wrapper">
        <div class="container-fluid">
            <!-- Page Heading -->
            <div class="row" id="main" >

                <!-- BEGIN Bootstrap form testing-->
                <form class="form-horizontal" id="validateForm" method="POST" onsubmit="return false">
                    <div class="row">
                        <div class="col-md-offset-1 col-md-4">

                            <div class="form-group">
                                <label class="control-label">Select your patient sets:</label>
                                <select name="patientSets" class="form-control" >
                                    <option value=" " >Please select patient set</option>
                                    <option>PS1</option>
                                    <option>PS2</option>
                                </select>
                            </div>



                            <div class="form-group">
                                <label class="control-label">Description of research project:</label>
                                <textarea class="form-control" name="descriptionOfResearchProject" placeholder="Enter your description here...."></textarea>
                              </div>


                        </div>
                        <div class="col-md-offset-1 col-md-4">
                            <div class="form-group">
                                <label class="control-label">Title of your research project:</label>
                                <input name="titleOfResearchProject" placeholder="Enter your title here...." class="form-control" type="text">
                              </div>

                              <div class="form-group">
                                <label class="control-label">Intended use:</label>
                                <select name="intendedUse" class="form-control" >
                                    <option value=" " >Please select one</option>
                                    <option>test1</option>
                                    <option>test2</option>
                                </select>
                            </div>



                        </div>
                    </div>

                    <button class="btn btn-success" id="conceptsButton">Request Data</button>



                    </form>
             </div>

    </div>
    <!-- /#page-wrapper -->
</div><!-- /#wrapper -->



</body>
</html>

The following is the screenshot of the above index.html page which is inside the public folder of XAMPP's htdocs.

And developer's console shows no errors as shown below;

score 1 · Answer 1 · answered May 07 '20 at 18:49

1

Thats because you try to initialize validator before validateForm object load. Move your script to front of </body>

answered May 07 '20 at 18:49

Onur Gelmez

491
5
8

dqve · Accepted Answer · 2020-05-07T19:12:02.363

Your code has some broken links and you didn't initialize your validation function on document 'ready', also you shouldn't initialize your validator before the validateForm object loads. I've fixed these below:


    <!DOCTYPE html>
    <html>
    <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <!-- fixed broken link -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <!-- fixed broken link -->

    </head>
    <body>
    <div id="wrapper">

        <div id="page-wrapper">
            <div class="container-fluid">
                <!-- Page Heading -->
                <div class="row" id="main" >

                    <!-- BEGIN Bootstrap form testing-->
                    <form class="form-horizontal" id="validateForm" method="POST" onsubmit="return false">
                        <div class="row">
                            <div class="col-md-offset-1 col-md-4">

                                <div class="form-group">
                                    <label class="control-label">Select your patient sets:</label>
                                    <select name="patientSets" class="form-control" >
                                        <option value=" " >Please select patient set</option>
                                        <option>PS1</option>
                                        <option>PS2</option>
                                    </select>
                                </div>



                                <div class="form-group">
                                    <label class="control-label">Description of research project:</label>
                                    <textarea class="form-control" name="descriptionOfResearchProject" placeholder="Enter your description here...."></textarea>
                                  </div>


                            </div>
                            <div class="col-md-offset-1 col-md-4">
                                <div class="form-group">
                                    <label class="control-label">Title of your research project:</label>
                                    <input name="titleOfResearchProject" placeholder="Enter your title here...." class="form-control" type="text">
                                  </div>

                                  <div class="form-group">
                                    <label class="control-label">Intended use:</label>
                                    <select name="intendedUse" class="form-control" >
                                        <option value=" " >Please select one</option>
                                        <option>test1</option>
                                        <option>test2</option>
                                    </select>
                                </div>



                            </div>
                        </div>

                        <button class="btn btn-success" id="conceptsButton">Request Data</button>



                        </form>
                 </div>

        </div>
        <!-- /#page-wrapper -->
    </div><!-- /#wrapper -->



    <script type="text/javascript">
            //Initialize function when document 'is ready'
            $(document).ready(function() {
        //BEGIN FORM Validations
            $('#validateForm').bootstrapValidator({
          feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {

            patientSets: {
                validators: {
                    notEmpty: {
                        message: 'Please select a patient set'
                    }
                }
            },
            titleOfResearchProject: {
                validators: {
                    stringLength: {
                        min: 5,
                        message: 'Please Enter the title with minimum 5 letters length'
                    },
                    notEmpty: {
                        message: 'Please Enter title of your project'
                    }
                }
            },

            descriptionOfResearchProject: {
                validators: {
                    stringLength: {
                        min: 15,
                        max: 100,
                        message: 'Please enter at least 15 characters and no more than 100'
                    },
                    notEmpty: {
                        message: 'Please Enter Description'
                    }
                }
            },
            intendedUse: {
                validators: {
                    notEmpty: {
                        message: 'Please select one option'
                    }
                }
            },
        }
    });

            //END FORM Validations
    });
            //END FORM Validations
        </script>
    </body>
    </html>

bootstrap validator not working in my code(no errors thrown) but works on JSFiddle

2 Answers2