在外部提交按鈕中使用“formnovalidate”進行 jQuery 驗證<form>

Question

我有一個使用 jQuery Validation 插件的編輯表單。 它是 ASP.NET Core 項目的一部分，也使用 ASP.NET 的 Unobtrusive Validation 插件。 該表單有兩個提交按鈕，發布到服務器端的不同處理程序：

• 提交更改
• 刪除條目

“提交更改”工作正常，但我希望“刪除”按鈕跳過任何客戶端驗證。 目前，如果缺少任何必填字段（或任何其他驗證條件未通過），它將不會發布表單。

我在“刪除”按鈕上嘗試了 HTML5 formnovalidate屬性，但沒有成功。 jQuery Validation 插件中是否有等效功能？ 如果不是，您將如何繞過僅針對特定提交按鈕的驗證？

編輯：

“刪除”按鈕實際上在<form>標記之外，但通過form屬性通過 ID 引用表單：

<form id="my-form">
  <!-- form fields and submit button here -->
</form>
<button type="submit" form="my-form" noformvalidate asp-page-handler="Delete">
  Delete entry
</button>

我發現在<form>中移動“刪除”按鈕時， noformvalidate屬性按預期工作。 我真的很想將此按鈕保留在<form>標記之外（由於頁面的布局），但如果沒有其他方法，我可能可以解決它。

關於如何使它在放置在表單之外時跳過驗證的任何想法？

Answer 1

您遇到的問題似乎已在此問題中進行了總結：

典型的保存與提交按鈕，其中保存不驗證而提交。 保存按鈕使用 formnovalidate 屬性聲明。 唯一的問題是這些按鈕在表單本身之外。

看，插件希望提交按鈕在您的表單中。 它實際上仍然處理“預防”標志 - cancel類和formnovalidate屬性 - 在單擊處理程序中從按鈕傳播到表單頂部（ source ）：

// "this" is jQuery-wrapped HTMLFormElement with validator attaching
this.on( "click.validate", ":submit", function( event ) {
  // Track the used submit button to properly handle scripted
  // submits later.
  validator.submitButton = event.currentTarget;

  // Allow suppressing validation by adding a cancel class to the submit button
  if ( $( this ).hasClass( "cancel" ) ) {
    validator.cancelSubmit = true;
  }

  // Allow suppressing validation by adding the html5 formnovalidate attribute to the submit button
  if ( $( this ).attr( "formnovalidate" ) !== undefined ) {
    validator.cancelSubmit = true;
  }
} );

...如果按鈕在表單DOM層次結構之外，這顯然不起作用，就像你的情況一樣。 只有submit.validate處理程序被觸發，但它希望檢查validator.cancelSubmit標志（如果它是真實的，則將其設置為 false）。

想到的一個想法是將您自己的單擊處理程序放在將覆蓋該標志的Delete按鈕上。 驗證器實例可以通過表單 $.data 訪問，就像通常使用 jQuery 插件一樣：

const validator = $.data(form, 'validator');

Answer 2

也許您正在尋找這樣的東西：

var $frm = $('#my-form')
    , frm = $frm[0]
    , $btnsubmit = $('button[type="submit"]');
frm.addEventListener('submit', (evt) => {
    var skipValidation = evt.submitter.hasAttribute('formnovalidate')
        , validator = $frm.data('validator');
    skipValidation && validator !== undefined
        ? (validator.cancelSubmit = true)
        : ($frm.valid() && $btnsubmit.prop('disabled', true));
})

在這里，我混合使用vanilla JS 和 JQuery，因為並非所有提交事件屬性都在 JQuery 中可用，因此不建議使用vanilla JS 訪問 JQuery data 。 在這種情況下，無論在哪里聲明您的提交按鈕，但是......您應該確保在$.validator.unobtrusive.parse(document)之前執行上述腳本，這意味着在validator.unobtrusive變得引人注目之前。