Javascript 引导验证程序在我的代码中不工作（没有抛出错误），但在JSFIDLE上工作_Javascript_Twitter Bootstrap 3

Javascript 引导验证程序在我的代码中不工作（没有抛出错误），但在JSFIDLE上工作

javascript twitter-bootstrap-3

Javascript 引导验证程序在我的代码中不工作（没有抛出错误），但在JSFIDLE上工作,javascript,twitter-bootstrap-3,Javascript,Twitter Bootstrap 3,这里一切都很好但是，当我试图在index.html中使用相同的代码并点击请求数据按钮时，它不起作用。代码如下： <!DOCTYPE html> <html> <head> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta content="utf-8" http-equiv="encoding"> <link href="//maxc

这里一切都很好

但是，当我试图在

index.html

中使用相同的代码并点击

请求数据

按钮时，它不起作用。代码如下：

<!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>


//开始表单验证
$（'#validateForm'）。bootstrapValidator({
反馈图标：{
有效：“glyphicon glyphicon ok”，
无效：“glyphicon glyphicon删除”，
正在验证：“glyphicon glyphicon刷新”
},
字段：{
病人组：{
验证器：{
注意：{
消息：“请选择一个患者集”
}
}
},
研究项目的标题：{
验证器：{
弦长：{
民:5,，
消息：“请输入至少5个字母长度的标题”
},
注意：{
消息：“请输入项目的标题”
}
}
},
描述Fresearch项目：{
验证器：{
弦长：{
分钟:15,，
最高：100，
消息：“请输入至少15个字符，但不超过100”
},
注意：{
消息：“请输入说明”
}
}
},
意图推断：{
验证器：{
注意：{
消息：“请选择一个选项”
}
}
},
}
});
//结束形式验证
选择您的患者集：
请选择患者集
PS1
PS2
研究项目说明：
您的研究项目名称：
预期用途：
请选择一个
测试1
测试2
请求数据

下面是上述

index.html

页面的屏幕截图，该页面位于XAMPP的htdocs的

public

文件夹中

开发人员的控制台没有显示错误，如下所示

这是因为您试图在

validateForm

对象加载之前初始化验证器。将脚本移动到

的前面，这是因为您试图在

验证表单

对象加载之前初始化验证程序。将脚本移动到

前面您的代码有一些断开的链接，并且您没有在文档“ready”上初始化验证函数，而且您不应该在加载

validateForm

对象之前初始化验证程序。我已经修复了以下问题：


    <!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>


选择您的患者集：
请选择患者集
PS1
PS2
研究项目说明：
您的研究项目名称：
预期用途：
请选择一个
测试1
测试2
请求数据
//当文档“准备就绪”时初始化函数
$（文档）.ready（函数（）{
//开始表单验证
$（'#validateForm'）。bootstrapValidator({
反馈图标：{
有效：“glyphicon glyphicon ok”，
无效：“glyphicon glyphicon删除”，
正在验证：“glyphicon glyphicon刷新”
},
字段：{
病人组：{
验证器：{