在外部提交按钮中使用“formnovalidate”进行 jQuery 验证<form>

Question

I have an edit form using the jQuery Validation plugin. It's part of an ASP.NET Core project, also using ASP.NET's Unobtrusive Validation plugin. The form has two submit buttons, posting to different handlers server-side:

• Submit changes
• Delete entry

"Submit changes" is working fine, however I'd like the "Delete" button to skip any client-side validation. Currently it won't post the form if any required fields are missing (or any other validation condition doesn't pass).

I've tried the HTML5 formnovalidate attribute on the "Delete" button without success. Is there an equivalent feature in the jQuery Validation plugin? If not, how would you bypass validation only for a specific submit button?

EDIT:

The "Delete" button is actually outside the <form> tag, but referencing the form by ID through the form attribute:

<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>

I've found that when moving the "Delete" button inside the <form> , the noformvalidate attribute works as expected. I would really like to keep this button outside the <form> tag (due to the page's layout), though I might be able to work around it if there's no other way.

Any ideas on how to make it skip validation while placed outside the form?

Answer 1

The problem you have seems to be summarized in this issue :

Typical save vs submit button where save does not validate and submit does. Save button is declared with the formnovalidate attrribute. Only thing is that these buttons are outside of the form itself.

See, the plugin expects the submit buttons to be inside your form. It actually still handles both 'preventing' flags - cancel class and formnovalidate attribute - within click handler propagated from buttons to the top of the form ( 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;
  }
} );

... which clearly doesn't work if buttons are outside of form DOM hierarchy, like in your case. Only submit.validate handler is fired, but it expects to check validator.cancelSubmit flag (and set it to false if it's truthy).

One idea that comes to mind is to place your own click handler on Delete button that will override that flag. Validator instance is accessible through form $.data, as usually with jQuery plugins:

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

Answer 2

Perhaps you are looking for something like this:

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));
})

here I'm using a mix of vanilla JS and JQuery because not all submit-event properties are available in JQuery and is not so recommended to access JQuery data using vanilla JS. In this case, there is no matter where are declared your submit-buttons but... you should be sure to execute the above script before $.validator.unobtrusive.parse(document) that mean before validator.unobtrusive become obtrusive .