부트 스트랩 양식 유효성 검사가 작동하지 않습니다.

-1

부트 스트랩 검사기를 사용하여 사용자 이름과 암호 필드의 유효성을 검사하려고합니다. 부트 스트랩 검사기에 css와 js를 포함 시켰습니다. 검증 형태 ID는 #login부트 스트랩 양식 유효성 검사가 작동하지 않습니다.

코드는이 문제를 해결하는 방법

<head> 
    <script type='text/javascript' src='js/jquery-2.1.1.min.js'></script> 
      <script type="text/javascript" src="js/jquery-ui.js"></script> 
         <link rel="stylesheet" href="js/bootstrap-3.1.1-dist/css/bootstrap.min.css"/> 
      <link rel="stylesheet" href="js/bootstrap-3.1.1-dist/css/bootstrap-theme.min.css"/> 
      <script type='text/javascript' src="js/bootstrapvalidator-dist-0.4.5/dist/js/bootstrapValidator.min.js"></script> 
      <script type='text/javascript' src="js/bootstrapvalidator-dist-0.4.5/dist/css/bootstrapValidator.min.css"></script> 
      <script> 
       $(document).ready(function() { 
        $('#login').bootstrapValidator({ 
         feedbackIcons: { 
          valid: 'glyphicon glyphicon-ok', 
          invalid: 'glyphicon glyphicon-remove', 
          validating: 'glyphicon glyphicon-refresh' 
         }, 
         fields: { 
          userName: { 
           validators: { 
            notEmpty: { 
             message: 'User Name required' 
            } 
           } 
          }, 
          password: { 
           validators: { 
            notEmpty: { 
             message: 'TPassword required' 
            } 
           } 
          } 
         } 
        }); 
       });</script> 
</head> 
    <body> 
    <form action="login" method="post" id="login" > 
            <div class="form-group"> 
             <label class="control-label" for="userName"> 
              User Id 
             </label> 
             <input type="text" placeholder="Username" name="userName" id="userName" class="form-control lgn"> 
            </div> 
            <div class="form-group"> 
             <label class="control-label" for="Password"> 
              Password 
             </label> 
             <input type="password" placeholder="Password" name="password" id="password" class="form-control lgn"> 
            </div> 
            <div class="form-group"> 
             <button type="submit" class="btn btn-success lgn" >Login</button> 
            </div> 
           </form> 
    </body>

다음과 같이이다.

출처

2014-07-26 xrcwrn

Here is a working fiddle

문제

바이올린 데모 jsfiddle.net/xrcwrn/3bthv은 JS 코드가 바이올린 포함 된 구문 오류에 포함 된 것이 었습니다. 콘솔은 자바 스크립트가 예상대로 작동하지 않을 때 제일 먼저 확인해야합니다. 필자는 아래 코드에서 바이올린이 작동하도록 변경 한 내용을 주석으로 처리했습니다. (그래도 문제의 코드가 괜찮은 것 같습니다.)

$(document).ready(function() { 
    $('#login').bootstrapValidator({ 
     feedbackIcons: { 
      valid: 'glyphicon glyphicon-ok', 
      invalid: 'glyphicon glyphicon-remove', 
      validating: 'glyphicon glyphicon-refresh' 
     }, 
     fields: { 
      userName: { 
       validators: { 
        notEmpty: { 
         message: 'The first name is required and cannot be empty' 
        } 
       } 
      }, 
      password: { 
       validators: { 
        notEmpty: { 
         message: 'The last name is required and cannot be empty' 
        } 
       } 
      } /* <-- removed unneeded comma */ 
     } /* <-- added closing brace */ 
    }); 
});

출처

2014-07-27 12:20:58 dmullings

부트 스트랩 양식 유효성 검사가 작동하지 않습니다.

답변

관련 문제