What can I do to stop a form from being submitted?

Problem

I have a form with a submit button somewhere on it.

But I’d like to be able to ‘catch’ the submit event and prevent it from happening.

Is there a way for me to do this?

Because the submit button is part of a custom control, I can’t change it.

Asked by Nathan Osman

Solution #1

Return false, unlike the other replies, is only part of the solution. Consider the case where there is a JS error before the return statement…

html

<form onsubmit="return mySubmitFunction(event)">
  ...
</form>

script

function mySubmitFunction()
{
  someBug()
  return false;
}

Returning false here will not have any effect, and the form will be submitted regardless. To avoid the default form action for Ajax form submissions, you should also use preventDefault.

function mySubmitFunction(e) {
  e.preventDefault();
  someBug();
  return false;
}

Even with the bug, the form would not submit in this scenario!

A try…catch block could be used instead.

function mySubmit(e) { 
  e.preventDefault(); 
  try {
   someBug();
  } catch (e) {
   throw new Error(e.message);
  }
  return false;
}

Answered by Ben Rowe

Solution #2

You may utilize the onsubmit inline event like this.

<form onsubmit="alert('stop submit'); return false;" >

Or

<script>
   function toSubmit(){
      alert('I will not submit');
      return false;
   }
</script>

<form onsubmit="return toSubmit();" >

Demo

When working on large projects, this may not be a good idea. It’s possible that you’ll need to use Event Listeners.

Please see this page for further information on Inline Events vs. Event Listeners (addEventListener and Internet Explorer’s attachEvent). I can’t explain it any better than Chris Baker did.

Answered by 9 revs, 3 users 73%

Solution #3

Use the.addEventListener() method to add an event listener to the form, and then use the.preventDefault() method on event:

Because it isolates webpage logic and structure, I believe it is a better alternative than implementing a submit event handler inline with the onsubmit attribute. It’s a lot easier to maintain a project where the logic and HTML are separated. Unobtrusive JavaScript can be found here.

It’s not a good idea to use the form DOM object’s.onsubmit property since it stops you from connecting numerous submit callbacks to a single element. See addEventListener vs. onclick for more information.

Answered by Michał Perłakowski

Solution #4

As of today, the following works (tested in Chrome and Firefox):

<form onsubmit="event.preventDefault(); return validateMyForm();">

where validateMyForm() returns false if the validation fails. The important thing to remember is to utilize the name event. We can’t use e.preventDefault, for example ()

Answered by Vikram Pudi

Solution #5

Try this one…

HTML Code

<form class="submit">
    <input type="text" name="text1"/>
    <input type="text" name="text2"/>
    <input type="submit" name="Submit" value="submit"/>
</form>

jQuery Code

$(function(){
    $('.submit').on('submit', function(event){
        event.preventDefault();
        alert("Form Submission stopped.");
    });
});

or

$(function(){
    $('.submit').on('submit', function(event){
       event.preventDefault();
       event.stopPropagation();
       alert("Form Submission prevented / stopped.");
    });
});

Answered by Sach

Post is based on https://stackoverflow.com/questions/3350247/how-to-prevent-form-from-being-submitted