bootstrap验证程序在我的代码中不起作用(未引发错误),但在JSFiddle上有效[duplicate]

问题描述 投票:0回答:2
在此JSFiddle中,一切正常。>

但是,当我尝试在index.html中使用相同的代码并按Request Data按钮时,它不起作用。以下是代码:

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

以下是上述index.html页面的屏幕快照,该页面位于XAMPP的htdocs的public文件夹中。

enter image description here

并且开发人员的控制台没有显示错误,如下所示;

enter image description here

[在此JSFiddle中,一切正常,但是,当我尝试在index.html中使用相同的代码并单击Request Data按钮时,则无法正常工作。以下是代码:..

javascript twitter-bootstrap-3
2个回答
4
投票
您的代码有一些断开的链接,并且您没有在文档'ready'上初始化验证函数,而且,在加载validateForm对象之前,您也不应该初始化验证器。我已经在下面修复了这些问题:

1
投票
那是因为您尝试在validateForm对象加载之前初始化验证器。将脚本移到</body>
© www.soinside.com 2019 - 2024. All rights reserved.