如何使用jQuery驗證插件按鈕點擊

Question

我想執行一個jQuery驗證插件，但得到一個小問題。在同一個按鈕上，我必須首先執行驗證，並且驗證成功後，通過獲取此按鈕的ID來執行其他jQuery代碼。例如查看下面的代碼。

$(function() { 

       $("#form-insert").validate({ 
        rules: { 
         tbRollNo: "required" 
        }, 
        messages: { 
         tbRollNo: "Required Field" 
        } 

       }); 

    $("#insertstd").click(function (e) { 
        e.preventDefault(); 
        debugger 
        $.ajax({ 
         type: 'POST', 
         url: '/Home/student', 
         data: { 
          Insert: true, 
          RollNo: $('#tbRollNo').val(), 
          Title: $('#tbTitle').val(), 
         }, 
         success: function() { 
         }, 

         error: function() { 
          alert("Oh noes"); 
         } 
        }); 
}); 

按鈕的代碼如下： -

<input id="insertstd" type="submit" name="btnSubmit" value="Submit" /> 

所以，當我點擊上面的按鈕，它直接讀取$("#insertstd").click功能，但不啓動驗證，當我刪除按鈕id="insertstd"則執行驗證。

所以我想它應該首先執行驗證，然後運行$("#insertstd").click函數。

Answer 1

報價標題：

「如何使用jQuery驗證插件按鈕點擊」

答：你不需要做任何事情，因爲按鈕的click事件已被插件自動捕獲，然後觸發驗證。

換句話說，解決方案是刪除您的整個處理函數並將ajax()放在.validate()方法的the submitHandler option的內部。

按照文檔：

submitHandler：回調處理實際當表單是有效的提交。獲取表單作爲唯一的參數。替換默認的提交。 經過驗證，通過Ajax提交表單的正確位置。

$(function() { 

    $("#form-insert").validate({ 
     rules: { 
      tbRollNo: "required" 
     }, 
     messages: { 
      tbRollNo: "Required Field" 
     }, 
     submitHandler: function(form) { 
      // your ajax would go here. 
      $.ajax({ 
       // your ajax options 
       .... 
      }); 
      return false; // extra insurance preventing the default form action 
     } 
    }); 

}); 

---

報價OP：

「所以，當我點擊上面的按鈕，它直接讀取$("#insertstd").click功能，但不啓動驗證，當我刪除id="insertstd"從按鈕，然後它執行驗證。「

那是因爲你的click處理程序與已建成的插件submit處理程序干擾。當您從按鈕中刪除id時，您將停止使用您的click處理程序並允許插件進行驗證。由於您想在之後使用ajax()表單通過驗證，因此您需要將其放入由jQuery Validate插件提供的submitHandler回調選項中。