如何阻止通过HTMLFormElement.submit()触发的表单提交

Great catch—you’re totally right that HTMLFormElement.submit() skips submit events and native validation entirely, which is a frustrating loophole when you’re trying to secure form submissions. Here’s a reliable way to plug this gap without relying on onsubmit or event.preventDefault() for this specific case:

1. Override the Form’s submit Method #

Since submit() doesn’t trigger events, we need to intercept the method itself to add validation checks before allowing submission. Here’s how to modify your example code to implement this:

var $form = document.getElementById("my-form");
var $input = document.getElementById("restricted-input");
var $notice = document.getElementById("notice");
var $submitForm = document.getElementById("submit-form");
var $requestSubmitForm = document.getElementById("request-submit-form");
var $resetForm = document.getElementById("reset-form");

// Save the native submit method to reference later if needed
const originalSubmit = $form.submit;

// Override the form's submit method with our custom logic
$form.submit = function() {
  // Check if the form meets all validation rules (pattern, required, etc.)
  if (!this.checkValidity()) {
    // Trigger the browser's native validation error prompts
    this.reportValidity();
    $notice.innerHTML = "Validation failed—fix errors to submit!";
    return; // Block the submission from proceeding
  }

  // If validation passes, you can either:
  // A) Run your custom submission logic (matches the submit event handler)
  $notice.innerHTML = "Submitted via form.submit(): " + $input.value;
  // OR B) Call the original submit method to trigger native form submission
  // originalSubmit.call(this);
};

// Your existing submit event listener (works for clicks/enter key submissions)
$form.addEventListener("submit", function (event) {
  event.preventDefault();
  $notice.innerHTML = "Submitted: " + $input.value;
});

// Remaining event listeners stay unchanged
$submitForm.addEventListener("click", function (event) {
  event.preventDefault();
  $notice.innerHTML = "";
  $form.submit();
});

$requestSubmitForm.addEventListener("click", function (event) {
  event.preventDefault();
  $notice.innerHTML = "";
  $form.requestSubmit();
});

$resetForm.addEventListener("click", function (event) {
  event.preventDefault();
  $notice.innerHTML = "";
  $form.reset();
});

2. Key Notes About the Solution #

• checkValidity(): This native method returns true only if all form elements satisfy their validation attributes (like your pattern="^[a-z]+$" and required rules).
• reportValidity(): This triggers the same browser-native validation messages users see when clicking a submit button, keeping feedback consistent.
• requestSubmit(): No extra work needed here! Unlike submit(), requestSubmit() fires the standard submit event, so your existing event.preventDefault() logic will block it just like normal user-initiated submissions.

Why This Works #

By overriding the submit method, we insert our validation check directly into every call to form.submit(). There’s no way to bypass this unless someone rewrites the method again (which is unlikely in most use cases), so it locks down that submission loophole completely.

内容的提问来源于stack exchange，提问作者Matt Scheurich