在Twitter上使用validate.js引導程序

我使用Twitter Bootstrap v3.3.4來創建模態登錄表單。我想在我通過AJAX發送數據之前使用jQuery的validate.js插件來驗證表單。但是，即使使用插件編寫最小腳本，我也沒有從驗證中得到任何錯誤。在Twitter上使用validate.js引導程序

請在HTML標記下面找到validate.js（version 1.13.1）腳本。提前致謝。

$(document).ready(function(){ 
    $("#loginButton").on("click",function(){ 
     //alert("logining in...."); 
     //jQuery Validate Plugin: http://jqueryvalidation.org/ - 24/05/2015 
     $("#loginModal").validate({ 
      rules:{ 
       username:{ 
        required:true, 
        minlength:6 
       }, 
       password:{ 
        required:true, 
        minlength:6 
       } 
      } 
     }); 
    }); 
}); 


<div class="modal" id="loginModal" role="dialog" aria-labelledby="loginModalWindowLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button class="close" type="button" data-dismiss="modal" aria-label="Close"> 
        <span aria-hidden="true">&times;</span> 
       </button> 
       <h4 class="modal-title" id="loginModalWindowLabel">Sign In</h4> 
      </div> 
      <div class="modal-body"> 
       <form onsubmit="return false;" id="loginForm"> 
       <div class="row"> 
        <div class="col-md-12"> 
         <div class="form-group"> 
          <label class="control-label" for="username">Username</label> 
          <input class="form-control" id="username" name="username"> 
         </div> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-md-12"> 
         <div class="form-group"> 
          <label class="control-label" for="password">Password</label> 
          <input class="form-control" id="password" name="password"> 
         </div> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-md-12"> 
         <div class="form-group"> 
          <button type="button" id="loginButton" class="bbcModalbutton pull-right">Login</button> 
         </div> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-md-12"> 
         <a href="#">Unable to access your account?</a> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-md-12"> 
         Don't have an account? <a href="#">Register FREE</a> 
        </div> 
       </div> 
       </form> 
      </div> 
     </div> 
    </div> 
</div>

強大的文本

來源

2015-05-25 Sam D Harris

因爲你的登錄模式是不是在DOM，但它的未來元素，你需要觸發器是在不同的語法：

$(document).on("click", '#loginButton', function(){ 
//your code 
}

這裏是一個fiddle demonstrating the effect

來源

2015-05-25 09:20:57 Mark

我應該從#loginModal或表單的ID驗證表單？ –

jquery validate在name屬性上工作，您應該驗證名稱，而不是id，但您可以保持原樣，並從按鈕 – Mark

的點擊事件啓動驗證過程。我仍然遇到問題。一切都在頁面上加載。我甚至試圖在另一個有最小標記的網頁上使用validate.js，並且不使用引導程序。我究竟做錯了什麼？我根本看不到任何問題。 –

經過大約半個小時的回頭和前進，我終於解決了它。如果你看我的原始文章，你會看到我有登錄按鈕類型「按鈕」。出於某種原因，當我將其更改爲鍵入提交併且工作。我不明白爲什麼，但它的工作原理。

感謝馬克的幫助！

來源

2015-05-25 10:05:52

首先，插件自動捕獲type="submit"button或input的點擊事件。如果type屬性未設置爲submit，則不會發生任何情況。

其次，你不需要把.validate()一個click處理器的內部，因爲.validate()方法僅用於初始化插件。然後初始化後，提交按鈕的click事件爲自動捕獲。（也不需要內嵌onsubmit事件處理程序。）

$(document).ready(function() { 

    $("#loginModal").validate({ // <-- initialize plugin 
     // rules & options 
     ....

的id您form的，LoginForm您連接到.validate()，#loginModal選擇不匹配。

修復了這一切......

工作演示：http://jsfiddle.net/654o4wgd/

來源

2015-05-25 16:27:40 Sparky

在Twitter上使用validate.js引導程序

回答

相關問題