Question

我正在使用bootstrap验证来验证jsp页面。

我的文件夹结构如下，

WebContent
├── bootstrap-form-validation
├── js
└── pages

此处所有三个文件夹都在网络内容下。如果我在页面文件夹下再创建一个名为teacherDetails的文件夹来放置我的jsp文件。我的问题是验证工作不正常。但是当我把jsp文件放在页面文件夹之外或者直接放在webcontent下时，它的工作正常，对于我的项目，它必须在pages文件夹中。请帮助我，我的jsp代码如下

 <html lang="en">
  <head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="description" content="">
<meta name="author" content="">

<!-- Le styles -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

  <!-- Optional theme -->
 <link href="<%=request.getContextPath()%>/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">  
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="<%=request.getContextPath()%>/bootstrap-form-validation/style.css" rel="stylesheet">

 <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
 <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/bootstrap-datetimepicker-master/css/datetimepicker.css">
  <script src="<%=request.getContextPath()%>/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-modal.js"></script>
     <script src="<%=request.getContextPath()%>/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
</head> 


 <script type="text/javascript">
$(function() {
    $('#datetimepicker4').datetimepicker({
        pickTime : false
    });
});
 </script>


   <script>
        $(function () { $("input,select,textarea").not("[type=submit]").jqBootstrapValidation(); } );
  </script>


   <script>
function profileDetails() {
    document.getElementById("profiledetails").submit();

}
function profileCancel() {
    document.getElementById("profileDetails").reset();
}
   </script>




    <style>

   .no-space [class *="span"] {
margin-left: 0 !important;
width: 25% !important;
//
This
is
for
4
elements
ONLY
in
the
row
     }


   </style>


     <body>






        <form class="well form-horizontal" id="create_teacher" method="post" action="">
            <div style="height: 850px;">
                <div style="width: 104%; margin-top: -20px;">

                    <fieldset>
                        <legend style="color: #333;">&nbsp;&nbsp;&nbsp;Teacher Information</legend>
                </div>
                <br> <br>
                <div style="margin-left: 140px">
                <div class="form-group">
                    <label for="uln" class="control-label">Teacher Id:</label>
                    <div class="col-xs-8">
                        <div class="col-lg-8">
                            <input type="text" class="form-control" name="teacherId"
                                id="teacherId">
                        </div>
                    </div>
                </div>
                <br> 
                <div class="form-group">
                    <label for="name" class="control-label">Name :</label>
                    <div class="col-xs-8">
                        <div class="col-lg-8">

                            <input type="text" class="form-control" name="teacherName"
                                id="teacherName">
                        </div>
                    </div>
                </div>
                <br> 

                <div class="form-group">
                    <label for="gender" class="control-label">Gender:</label>
                    <div class="col-xs-8">
                        <div class="col-lg-8">

                            <select class="form-control" name="gender">
                                <option></option>
                                <option>Male</option>
                                <option>Female</option>

                            </select>
                        </div>
                    </div>
                </div>

                <br> 



                <div class="form-group">
                    <label for="dob" class="control-label">Date Of Birth(DOB) :</label>
                    <div class="col-xs-8">
                        <div class="col-lg-8">
                            <input type="date" class="form-control" name="dob" id="date">
                        </div>
                    </div>
                </div>
                <br> 

                <div class="form-group">
                    <label for="dob" class="control-label">Date Of
                        Join:</label>
                    <div class="col-xs-8">
                        <div class="col-lg-8">
                            <input type="date" class="form-control" name="doj" id="date">
                        </div>
                    </div>
                </div>
                <br> 

                <div class="form-group">
                    <label for="name" class="control-label">Education
                        :</label>
                    <div class="col-xs-8">
                        <div class="col-lg-8">

                            <input type="text" class="form-control" name="teacherName"
                                id="education">
                        </div>
                    </div>
                </div>
                <br> 

                <div class="form-group">
                    <label for="name" class="control-label">Experience
                        :</label>
                    <div class="col-xs-8">
                        <div class="col-lg-8">

                            <input type="text" class="form-control" name="teacherName"
                                id="experience">
                        </div>
                    </div>
                </div>
                <br> 

                <div class="form-group">
                    <label for="name" class="control-label">Prev Employee details :</label>
                    <div class="col-xs-8">
                        <div class="col-lg-8">

                            <input type="text" class="form-control" name="teacherName"
                                id="prevdetails">
                        </div>
                    </div>
                </div>
                <br> 


                <div class="form-group">
                    <label class="control-label">Photo :</label>
                    <div class="col-xs-8">
                        <div class="col-lg-8">

                            <input type="file"  />
                        </div>
                    </div>



                </div>
                <br> 

                <div class="form-group">
                    <label for="name" class="control-label">Email Id:</label>
                    <div class="col-xs-8">
                        <div class="col-lg-8">

                            <input type="email" class="form-control" name="teacherName"
                                id="email">
                                <p class="help-block"></p>
                        </div>
                    </div>
                </div>
                <br> 
                <div class="control-group">
                    <label class="control-label"></label>
                    <div class="controls">
                        <div style="margin-left: 150px">
                            <input type="submit" class="btn btn-primary" value="Submit"
                                onclick="profileDetails();" /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <input type="button" class="btn btn-primary" value="Cancel"
                                onclick="cancelProfile();" />
                        </div>
                    </div>
                </div>
                </div>
                </fieldset>
            </div>
        </form>


   <script src="<%=request.getContextPath()%>/bootstrap-form-validation/assets/js/jquery-1.7.1.min.js"></script> 

    <script src="<%=request.getContextPath()%>/bootstrap-form-validation/assets/js/jquery.validate.js"></script> 

    <script src="<%=request.getContextPath()%>/js/script.js"></script> 
 <script>
    addEventListener('load', prettyPrint, false);
    $(document).ready(function(){
    $('pre').addClass('prettyprint linenums');
        });
     </script> 
</body>
 </html>

Answer 1

您的链接是相对的

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">

这些链接将在同一级别搜索提到的文件夹。因此，如果你把你的jsp放在页面下名为teacherDetails的文件夹中，它会在页面文件夹中查找bootstrap文件夹。

所以要指向当前级别之外的文件夹，您需要按如下方式指定它：

<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
./ represents the current folder, ../ will represent the parent of current folder and so on..

解决方案Bootstrap表单验证

1 个答案: