JavaScript Code to Stop Form Submission

JavaScript code to stop form submission

You can use the return value of the function to prevent the form submission

<form name="myForm" onsubmit="return validateMyForm();">

and function like

<script type="text/javascript">
function validateMyForm()
{
  if(check if your conditions are not satisfying)
  { 
    alert("validation failed false");
    returnToPreviousPage();
    return false;
  }

  alert("validations passed");
  return true;
}
</script>

In case of Chrome 27.0.1453.116 m if above code does not work, please set the event handler's parameter's returnValue field to false to get it to work.

Thanks Sam for sharing information.

EDIT :

Thanks to Vikram for his workaround for if validateMyForm() returns false:

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

where validateMyForm() is a function that returns false if validation fails. The key point is to use the name event. We cannot use for e.g. e.preventDefault()

Stop form submission when using JavaScript

You don't have to return false to stop the form from being submitted. You need to use the event's preventDefault() method, and submit the form using JS if the data is valid. Like this:

function validateform(e) { // take the event as parameter
    e.preventDefault(); // stop the submission

    var cnic1 = document.getElementById("cnic1");

    if (cnic1.value.length < 15) {
        window.alert("Invalid CNIC");
        cnic1.focus();
    } else {
        form.submit();
    }
}

var form = document.getElementsByName('applyform')[0];
form.addEventListener('submit', validateform);

I also added the listener using JS just so you can be sure the event parameter is passed to your validation function. Remove the onsubmit="..." from your form.

How to stop form submission?

You need to call preventDefault of the event object that comes as a parameter you get from the callback function of the EventListener. Like that:

...
<head>
<script>
window.addEventListener("load",init);
function init()
  {document.getElementById("form").addEventListener("submit",function(e)
     {e.preventDefault();});}
</script>
</head>
<body>
<form id="form">
  <input type="submit">
</form>
</body>
...

You can call that parameter anything, and you can also define that function somewhere else.

...
<script>
window.addEventListener("load",init);
function init()
  {document.getElementById("form").addEventListener("submit",handleSubmit);}
function handleSubmit(event)
  {event.preventDefault();}
</script>
...

prevent form submission (javascript)

There's a fundamental flaw with this approach. You are currently telling the form that when text1 changes, then call someFunc(). If true, use JavaScript to submit the form. If false, go on about your business. If you hit enter in the text input, the form still submits. If there is a submit button that gets clicked, the form still submits.

The basic way to approach this is like so:

<form name="form1" onsubmit="return someFunc()">
    <input type="text" name="text1" id="text1">
</form>

When the from is submitted, call someFunc(). This function must return either true or false. If it returns true, the form submits. If false, the form does nothing.

Now your JavaScript needs a slight alteration:

<script>
function someFunc() {
    if (1==2) {
        return true;
    } else {
        alert("Not submitting");
        return false;
    }
}
</script>

You can still have other functions called when a field is changed, but they still won't manage the form's final submission. In fact, someFunc() could call the other functions to do a final check before returning true or false to the onsubmit event.

EDIT: Documentation on implicit form submission.

EDIT 2:

This code:

$(document).ready(function(){ 
    $("#text1").on('change', function(event){ 
        event.preventDefault(); 
    }); 
});

is stopping the default processing for the change event associated with that element. If you want to affect the submit event, then you'd do this:

$(document).ready(function(){ 
    $("#form1").submit(function(event){ 
        event.preventDefault(); 
    }); 
});

Which would allow you to do something like this:

$(document).ready(function(){ 
    $("#form1").submit(function(event){ 
        if ( $('#text1').val() !== "foo" ) {
            alert("Error");
            event.preventDefault(); 
        }
    }); 
});

Prevent users from submitting a form by hitting Enter

You can use a method such as

$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

In reading the comments on the original post, to make it more usable and allow people to press Enter if they have completed all the fields:

function validationFunction() {
  $('input').each(function() {
    ...

  }
  if(good) {
    return true;
  }
  return false;
}

$(document).ready(function() {
  $(window).keydown(function(event){
    if( (event.keyCode == 13) && (validationFunction() == false) ) {
      event.preventDefault();
      return false;
    }
  });
});

Stop form submit from javascript

You could do something like this:

(function() {
  var form = document.getElementById('form');
  var submit = form.submit;

  form.submit = function() {
    var evt = new Event('submit', {
      cancelable: true
    });

    form.dispatchEvent(evt);

    //minimc the default behaviour and submit the form if 'preventDefault'  was not called.
    if (!evt.defaultPrevented) {
      submit.call(form);
    }
  };
}());

But be award that this might result in memory leaking in older browsers.

EDIT Update the code to include Event emitting. This is only tested in latest WebKit/BLINK and FireFox. For IE and older browser you might need a fallback.

Updated fiddle

EDIT 2

You should maybe think about another solution, e.g. something like this:

function submitCallback(e) {
    e.preventDefault();
    alert('stopped');
}    

document.getElementById('form').addEventListener('submit', submitCallback, false);

formPreventSubmit(document.getElementById('form'), submitCallback);


function formPreventSubmit(form, submitCallback) {
  var submit = form.submit;

  form.submit = function() {
    var evt = new SomeCustomEvent();

    submitCallback(evt)

    if (!evt.defaultPrevented) {
      submit.call(form);
    }
  };
}

SomeCustomEvent need to be some class that mimics the behavior of a real event having a preventDefault function.

Stop form submit with native javascript

Using querySelector and an event listener, it's almost like jQuery

document.querySelector('#search form').addEventListener('submit', function(e) {
    e.preventDefault();
});

note that the script has to come after the elements, or use a DOM ready handler, so the elements are available.

FIDDLE

How to prevent form from being submitted?

Unlike the other answers, return false is only part of the answer. Consider the scenario in which a JS error occurs prior to the return statement...

html

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

script

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

returning false here won't be executed and the form will be submitted either way. You should also call preventDefault to prevent the default form action for Ajax form submissions.

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

In this case, even with the bug the form won't submit!

Alternatively, a try...catch block could be used.

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

JavaScript Code to Stop Form Submission