Bootstrap表單驗證不起作用

-1

我試圖驗證用戶名和密碼字段使用引導驗證器我已經包括css和js引導驗證程序。形式ID驗證是#loginBootstrap表單驗證不起作用

代碼是如下

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

如何解決這個問題。

小提琴演示jsfiddle.net/xrcwrn/3bthv

來源

2014-07-26 xrcwrn

Here is a working fiddle

的問題是包含在撥弄包含的語法錯誤，你的js代碼。控制檯應該是你檢查你的javascript沒有按預期工作時的第一件事。我在下面的代碼中評論了我爲了讓小提琴起作用而做出的改變。（它看起來像你的問題中的代碼雖好）

$(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

Bootstrap表單驗證不起作用

回答

相關問題