부트 스트랩 로그인 창 확인 화재

저는 부트 스트랩에 매우 익숙하며 로그인 창에 코드를 작성했습니다. 그냥 팝업 창을로드합니다. 그러나 타당성 검증은 실패합니다. 어디가 잘못되었는지 저를 시정하십시오. 콘솔에 Uncaught TypeError : undefined가 함수가 아닙니다라는 오류 메시지가 표시됩니다.부트 스트랩 로그인 창 확인 화재

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

당신은 $('#loginForm').bootstrapValidator에 대한 호출은 위의 참조가 필요 http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.1/js/bootstrapValidator.min.js

에 대한 참조를 포함하지 않았다.

출처

2014-09-13 08:27:47

부트 스트랩 로그인 창 확인 화재

답변

관련 문제