使用表單外部的按鈕提交表單並觸發jQuery驗證

Question

我正在使用jQuery驗證插件，表單使用ajax來提交表單。 我有一個浮動按鈕欄，根據頁面的用途生成頁面按鈕。 這些按鈕位於表單標記之外。 我的表單的ID是帳戶設置。 在我的文件中。我有這個：

$("#account-settings").validate({
        rules: {
              email: {email: true}
               },

         messages: {
                      email: {email: "Enter a valid email address."}
               },
    })

有一個名為savesettings的按鈕可以保存表單的設置。 這是點擊事件：

$('#savesettings').click(function() {  

 if($('#account-settings').valid()){
    alert("Valid form");
}
else{
    alert("Not valid");
}
}

當我點擊按鈕時沒有任何反應...所以，基本上，我顯然沒有正確使用插件，有人啟發我嗎？ 繼續閱讀文檔，但我沒有看到任何其他內容......

Answer 1

您需要在用戶單擊按鈕時序列化表單。

$('#savesettings').click(function() {  

 var $as = $('#account-settings');

 if($as.valid()){

    $.post(
        /* your server page */
      , $as.serialize()
      , /* your callback function */
    );

  }

  else{
    alert("Not valid");
  }

});

我應該指出以這種方式提交表單的明顯可訪問性陷阱，沒有JavaScript的用戶將無法使用它。

Answer 2

如果您想使用該表單之外的任何按鈕提交表單，您應該使用trigger()函數，如下所示：

$('body').on('click', '#my-button', function(){
    $('#account-settings').trigger('submit');
});

然后，您的驗證插件應該正常運行。

Answer 3

你的JS函數可以使用結束語。 嘗試類似的東西：

$('#savesettings').click(function() {  
  if($('#account-settings').valid()){
    alert("Valid form");
  } else {
    alert("Not valid");
  }
});