jQuery Bootstrap密碼錶不能正常工作

Question

我正在嘗試爲Twitter Bootstrap使用jQuery插件，它提供了可視化顯示用戶輸入密碼的質量的規則集。

This is how that plugin is working...

但我的問題是，當我試圖在我的項目，似乎它不能正常工作使用它。文本顯示相應，但米欄沒有工作..

這是我HTML -

<form class="form-horizontal"> 
    <div class="form-group"> 
    <label for="username" class="col-sm-3 control-label">username</label> 
    <div class="col-sm-5"> 
     <input type="text" class="form-control" id="username" placeholder="Username"> 
    </div> 
    </div> 
    <div class="form-group"> 
    <label for="password" class="col-sm-3 control-label">Password</label> 
    <div class="col-sm-5"> 
     <input type="password" class="form-control" id="password" placeholder="Password"> 
    </div> 
    </div> <div class="form-group"> 
    <label for="strenth" class="col-sm-3 control-label">Strenth</label> 
    <div class="col-sm-5"> 
     <!-- <div id="messages"></div> --> 
    </div> 
    </div> 

    <div class="form-group"> 
    <div class="col-sm-offset-3 col-sm-5"> 
     <button type="submit" class="btn btn-default">Sign in</button> 
    </div> 
    </div> 
    </form> 

我的jQuery -

jQuery(document).ready(function() { 
    var options = { 
    onLoad: function() { 
     $('#messages').text('Start typing password'); 
    }, 
    onKeyUp: function (evt) { 
     $(evt.target).pwstrength("outputErrorList"); 
    } 
    }; 
    $(':password').pwstrength(options); 
}); 

這是一個JSBIN用我所有的代碼到目前爲止

希望有人可以幫助我.. 謝謝。

Answer 1

替換head標籤

Check updated JSBIN here