2014-04-23 4 views
2

bootstrapValidator.js를 사용하여 내 페이지의 유효성을 검사했지만 내 페이지의 유효성을 검사 할 수 없습니다. 유효성 검사기 다운로드 링크는 https://github.com/nghuuphuoc/bootstrapvalidator입니다. 가능한 오류가 무엇입니까? IDE에서 Netbeans을 사용하고 있습니다.jQuery 부트 스트랩 유효성 검사가 작동하지 않음

<%@page contentType="text/html" pageEncoding="UTF-8"%> 

<html> 
    <head> 

     <meta name="viewport" content="width=device-width"> 
     <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
     <link rel="stylesheet" href="validator/dist/css/bootstrapValidator.min.css"/> 
     <script type="text/javascript" src="validator/src/js/bootstrapValidator.js"></script> 

     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
     <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
     <script> 
      $(document).ready(function() { 
       $('#RegisterForm').bootstrapValidator({ 
        fields: { 
         firstName: { 
          validators: { 
           notEmpty: { 
            message: 'The first name is required and cannot be empty' 
           } 
          } 
      `enter code here`    }, 
         lastName: { 
          validators: { 
           notEmpty: { 
            message: 'The last name is required and cannot be empty' 
           } 
          } 
         }, 
         email: { 
          validators: { 
           notEmpty: { 
            message: 'The email address is required' 
           }, 
           emailAddress: { 
            message: 'The input is not a valid email address' 
           } 
          } 
         }, 
         gender: { 
          validators: { 
           notEmpty: { 
            message: 'The gender is required' 
           } 
          } 
         } 
        }, 
        submitHandler: function(validator, form, submitButton) { 
         var fullName = [validator.getFieldElements('firstName').val(), 
          validator.getFieldElements('lastName').val()].join(' '); 
         $('#helloModal') 
           .find('.modal-title').html('Hello ' + fullName).end() 
           .modal(); 
        } 
       }); 
      }); 
     </script> 

    </head> 
    <body> 
     <jsp:include page="header.jsp" flush="true" /> 
     <br> 
     <br> 

     <br> 
     <br> 
     <form id="RegisterForm" class="form-horizontal"> 
      <div class="form-group"> 
       <label class="col-md-3 control-label">Full name</label> 
       <div class="col-md-4"> 
        <input type="text" class="form-control" name="firstName" /> 
       </div> 
       <div class="col-md-4"> 
        <input type="text" class="form-control" name="lastName" /> 
       </div> 
      </div> 

      <div class="form-group"> 
       <label class="col-md-3 control-label">Email address</label> 
       <div class="col-md-6"> 
        <input type="text" class="form-control" name="email" /> 
       </div> 
      </div> 

      <div class="form-group"> 
       <label class="col-md-3 control-label">Gender</label> 
       <div class="col-md-6"> 
        <div class="radio"> 
         <label><input type="radio" name="gender" value="male" /> Male</label> 
        </div> 
        <div class="radio"> 
         <label><input type="radio" name="gender" value="female" /> Female</label> 
        </div> 
        <div class="radio"> 
         <label><input type="radio" name="gender" value="other" /> Other</label> 
        </div> 
       </div> 
      </div> 

      <div class="form-group"> 
       <div class="col-md-offset-3 col-md-8"> 
        <button type="submit" class="btn btn-primary">Say hello</button> 
       </div> 
      </div> 
     </form> 
    </body> 
</html> 
+0

부트 스트랩 검사기 플러그인은 [tag : jquery-validate] 플러그인이 아닙니다. 태그를 지정할 때 더욱주의하십시오. 감사. – Sparky

+1

**이 질문을 스팸으로 분류하지 마십시오 **. 다시 말하지만, [your plugin] (https://github.com/nghuuphuoc/bootstrapvalidator)은 분명히 jQuery Validation 플러그인이 아니므로 [tag : jquery-validate] 태그는 관련이 없으므로 사용해서는 안됩니다. – Sparky

답변

4

귀하의 문제는

<script type="text/javascript" src="validator/src/js/bootstrapValidator.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 

Bootstrap Validator pluginjQuery를 플러그인입니다 ... 당신이 jQuery를 자체 전에 jQuery 플러그인을 포함 시켰 경우, 여기 가능성이 있으므로 jQuery 라이브러리 해야 포함 된 먼저. 부트 스트랩 (Bootstrap)에 의존하기 때문에, 아마도 그 이후에야 ...

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
<script type="text/javascript" src="validator/src/js/bootstrapValidator.js"></script> 
관련 문제