Question

用我的Bootstrap联系表单，我一直在遇到麻烦。加载javascript文件似乎很重要。根据展示位置，某些内容无法正常运行：

如果是这样的话：

<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>

我的联系表格不起作用。点击“提交” - 按钮，没有任何反应。但是bootstrap的折叠菜单按钮工作正常。

如果装货单是这样的：

<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>

联系表单（尤其是subimt按钮）按预期工作。但崩溃了 bootstrap菜单按钮不能正常工作。它是无法点击的。

我尝试了一切，但我不知道这种行为的原因。你有什么想法，如何使两件事互相帮助？

这是我的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
    <title>Contact Form</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
    <div class="navbar navbar-fixed-top" data-activeslide="1">
      <div class="container">
      <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
       <span class="icon-bar"></span>
      </button>

      <div class="nav-collapse collapse navbar-responsive-collapse">
        <ul class="nav row"> 
           <li data-slide="1" class="col-12 col-sm-2"><a id="menu-link-1" href="#slide-1"> <span class="text">MENU 1</span></a></li>
           <li data-slide="2" class="col-12 col-sm-2"><a id="menu-link-2" href="#slide-2"> <span class="text">MENU 2</span></a></li>
         </ul>
         <div class="row">
           <div class="col-sm-2 active-menu"></div>
         </div>
      </div><!-- /.nav-collapse -->
      </div><!-- /.container -->
    </div><!-- /.navbar -->

    <div class="slide story" id="slide-1" data-slide="1">
      <div class="container">
       <div class="row">
         <div class="col-12">
           <p>TEST</p>
         </div>           
       </div>
     </div><!-- /container -->
   </div>

    <div class="slide story" id="slide-2" data-slide="2">
      <div class="container">
       <div class="row">
         <div class="col-12">
           <div class="well">
             <form id="contact-form" class="form">
               <fieldset>
               <legend>Contact Form</legend>
                 <div class="form-group">
                   <label for="name" class="control-label">Name</label>  
                   <input type="text" class="form-control" id="name" name="name1" placeholder="name"/>              
                 </div>
                 <div class="form-group">
                   <label for="name" class="control-label">E-Mail</label>
                   <input type="text" class="form-control" id="email" name="email" placeholder="email"/>   
                 </div>
                 <div class="form-group">
                   <label for="name" class="control-label">Phone</label>
                   <input type="text" class="form-control" id="phone" name="phone" placeholder="phone"/>   
                 </div>
                 <div class="form-group">
                   <label for="name" class="control-label">message</label>
                   <textarea type="text" id="message" class="form-control"  name="message" rows="10" cols="40" placeholder="Message"></textarea>
                 </div>
                 <div class="form-group">
                   <button value="Send" class="btn btn-primary" type="submit" id="submit" name="submit">Send</button>      
                   <button type="reset" class="btn">Clear</button> 
                 </div>
               </fieldset>
             </form>
           </div>
         </div>           
       </div>
     </div><!-- /container -->
   </div>



  <!-- Java-Scripts -->
  <script src="js/html5shiv.js"></script>
  <script src="js/jquery-1.10.2.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/jquery-migrate-1.2.1.min.js"></script>
  <script src="js/jquery.easing.1.3.js"></script>
  <script src="js/script.js"></script>
  <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
  <script src="js/val55.js"></script>

 </body>
</html>

这是val55.js-File的样子：

$(document).ready(function() {
    $("#contact-form").validate({
        rules: {
            name1:{
                minlength: 3,
                maxlength: 20,
                required: true
            },
            email:{
                minlength: 3,
                required: true,
                email: true
            },
            phone:{
                minlength: 3,
                required: true
            },
            message: {
                minlength: 10,
                required: true
           }         
        },
        highlight: function(element) {
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
        },
        unhighlight: function(element) {
            $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
        },
        submitHandler: function(form) {
        //form.submit();
          alert('Hallo');
        }
    })
}); // end document.ready

此致约翰

Answer 1

这样做：

  <script src="js/html5shiv.js"></script>
  <script src="js/jquery-1.10.2.min.js"></script>
  <script src="js/jquery-migrate-1.2.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
  <script src="js/script.js"></script>
  <script src="js/val55.js"></script>

您可能需要在最后一个脚本之间切换，如果您的javascript中没有任何错误，一切都应该正常工作。

加载bootstrap javascripts的顺序

1 个答案: