Bootstrap登錄窗口驗證火災

我對Bootstrap非常陌生，我寫代碼登錄窗口。它只是加載彈出窗口。但驗證失敗。請糾正我出錯的地方。控制檯顯示錯誤消息說Uncaught TypeError：undefined不是一個函數。Bootstrap登錄窗口驗證火災

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Example of Twitter Bootstrap 3 Vertical Form Layout</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> 
     <link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" rel="stylesheet"> 
     <script> 
     $(document).ready(function() { 
    $('#loginForm').bootstrapValidator({ 
     message: 'This value is not valid', 
     feedbackIcons: { 
      valid: 'glyphicon glyphicon-ok', 
      invalid: 'glyphicon glyphicon-remove', 
      validating: 'glyphicon glyphicon-refresh' 
     }, 
     fields: { 
      username: { 
       validators: { 
        notEmpty: { 
         message: 'The username is required' 
        } 
       } 
      }, 
      password: { 
       validators: { 
        notEmpty: { 
         message: 'The password is required' 
        } 
       } 
      } 
     } 
    }); 
}); 
     </script> 
<style type="text/css"> 
    .bs-example{ 
     margin: 20px; 
    } 
</style> 
</head> 
<body> 

<button class="btn btn-default" data-toggle="modal" data-target="#loginModal">Login</button> 
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title">Login</h4> 
      </div> 

      <div class="modal-body"> 
       <!-- The form is placed inside the body of modal --> 
       <form id="loginForm" method="post" class="form-horizontal"> 
        <div class="form-group"> 
         <label class="col-md-3 control-label">Username</label> 
         <div class="col-md-5"> 
          <input type="text" class="form-control" name="username" /> 
         </div> 
        </div> 
        <div class="form-group"> 
         <label class="col-md-3 control-label">Password</label> 
         <div class="col-md-5"> 
          <input type="password" class="form-control" name="password" /> 
         </div> 
        </div> 
        <div class="form-group"> 
         <div class="col-md-5 col-md-offset-3"> 
          <button type="submit" class="btn btn-default">Login</button> 
         </div> 
        </div> 
       </form> 
      </div> 
     </div> 
    </div> 
</div> 
</body> 
</html>

來源

2014-09-13 Sivakumar Piratheeban

您不包括引用http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.1/js/bootstrapValidator.min.js

到$('#loginForm').bootstrapValidator呼叫要求上述參考。

來源

2014-09-13 08:27:47

Bootstrap登錄窗口驗證火災

回答

相關問題