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

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

$("#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"); 
} 
}

什麼也沒有發生......所以，基本上，我顯然不使用插件的權利，有人告訴我嗎？請繼續閱讀文檔結束了，但我沒有看到任何東西...

來源

2012-01-14 Brenden Clerget

您需要序列化在用戶點擊按鈕類似的形式..

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

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

if($as.valid()){ 

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

    } 

    else{ 
    alert("Not valid"); 
    } 

});

我應該指出明顯的無障礙陷阱與提交表單這種方式，用戶沒有JavaScript的不會是能夠使用它。

來源

2012-01-14 08:25:19

如果你想使用形式之外的任何按鈕提交表單，你應該使用trigger()功能，像這樣：

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

然後，您的驗證插件應該如常操作。

來源

2012-01-14 08:12:30

我想這應該是很好的提及我使用ajax提交表單，所以這不會對我很有用。 – 2012-01-14 08:13:15

啊對，實際上我假設你有你的submit（）函數中的代碼來處理所有其他事情。 – 2012-01-15 17:33:35

你的JS函數可以使用關閉paren。嘗試這樣的：

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

來源

2012-01-14 08:25:45 dinjas

即使只有此代碼，當我單擊按鈕時也不會發生任何事情...... – 2012-01-14 08:48:22

您可以嘗試現在放棄if/else部分，並在其中放置警報以確保該按鈕正按預期觸發click事件。如果是這樣，那麼你的問題很可能是由於驗證的東西。如果您還沒有收到警報，那麼其他地方可能存在問題。在Chrome中使用JavaScript控制檯或使用Firebug在追蹤javascript錯誤時確實很有幫助，因爲大多數情況下錯誤會導致在控制檯中顯示某些內容，指出問題所在。 – dinjas 2012-01-14 17:43:34

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

回答

相關問題