在外部提交按钮中使用“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变得引人注目之前。