0

I've found that when trying to prevent form submission that I thought I could use event.preventDefault() via the regular onsubmit event listener.

This method does work for when the form is submitted either by hitting the Enter key within a form's input, or by pressing the form's submit button.

I found that it was not prevented when the form was triggered with HTMLFormElement.submit(), when I was doing some tests in the browser to see how I could exploit it.

I was surprised to see that this submit method doesn't trigger an event, effectively allowing someone within the client to bypass any form validation, either be it imposed via HTML or JS.

How can I prevent form submission when triggered by HTMLFormElement.submit() ?

Here's an example (Codepen):

<script>
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");

$form.addEventListener("submit", function (event) {
  event.preventDefault();
  $notice.innerHTML = "Submitted: " + $input.value;
});

$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();
});
</script>

<form id="my-form" action="/" method="post">
  <input id="restricted-input" type="text" pattern="^[a-z]+$" required />
  <button type="submit">Submit</button>
</form>

<p id="notice"></p>

<p>
  <a id="submit-form" href="javascript:void 0">form.submit()</a><br/>
  <a id="request-submit-form" href="javascript:void 0">form.requestSubmit()</a><br/>
  <a id="reset-form" href="javascript:void 0">Reset form</a>
</p>

Edit: Please read the question in its entirety before answering. Answers that mention jQuery, onsubmit or event.preventDefault() as part of the resolution will be downvoted.

Matt Scheurich
  • 959
  • 2
  • 12
  • 24
  • 2
    If you're explicitly calling the submit method of a form, there's no way to prevent the submission after the call (`e.preventDefault` doesn't do anything, in a submit handler). – Teemu Jun 09 '20 at 12:05
  • Try to use jQuery, much easier. Here u can see an example: https://stackoverflow.com/questions/6462143/prevent-default-on-form-submit-jquery – Flamur Beqiraj Jun 09 '20 at 12:10
  • @FlamurBeqiraj jQuery is not going to solve the issue here if people can get around the form submission with vanilla JS – Matt Scheurich Jun 09 '20 at 12:12
  • @Teemu so basically anyone can submit any form online if they go into the DevTools console and trigger it with `submit()` ? – Matt Scheurich Jun 09 '20 at 12:14
  • 2
    Yes, that's the case, the submit listeners are not even called when triggering form submission in JS. – Teemu Jun 09 '20 at 12:15
  • Hmmmm, I think istead of using
    , maybe try to trigger an XHR request that u can control when to be sent. Could this be helpful?
     – Flamur Beqiraj Jun 09 '20 at 12:22
  • @FlamurBeqiraj appreciate that you're trying to find a resolution, however the question relates directly to my issue. I am using a `
    ` element and trying to prevent programmatic submission via JS that circumvents form validation and my `onsubmit` event listener.
     – Matt Scheurich Jun 09 '20 at 12:24
  • 1
    @MattScheurich Please don't waste too much of your time to this. It's always possible to post a form (or an AJAX call as well) without validation from a browser, or from a server when the poster doesn't even need your page. Make sure you've proper validation at the server side too, that's the only secure way. – Teemu Jun 09 '20 at 12:28
  • That's what i tried to say, like in the post of @RupeshTerase sayed, the browser is build like that, so to fully controle that, you can use alternatives. – Flamur Beqiraj Jun 09 '20 at 12:30
  • 2
    @FlamurBeqiraj Validation of an AJAX call is easy to circumvent. Just send it once, and then pick up the call from the Network tab, and use Edit and Resend tool. – Teemu Jun 09 '20 at 12:32

0 Answers0