阻止表单提交的JavaScript代码

Question

停止表单提交的一种方法是从您的JavaScript函数中返回false。

当点击提交按钮时，会调用一个验证函数。我在表单验证中有一个条件。如果满足该条件，我会调用一个名为returnToPreviousPage();的函数。

function returnToPreviousPage() {
    window.history.back();
}

我正在使用JavaScript和Dojo Toolkit。

与其返回到上一页，它会提交表单。我该如何中止此提交并返回到上一页？

Answer 1

使用prevent default

Dojo Toolkit

dojo.connect(form, "onsubmit", function(evt) {
    evt.preventDefault();
    window.history.back();
});

jQuery

$('#form').submit(function (evt) {
    evt.preventDefault();
    window.history.back();
});

Vanilla JavaScript

if (element.addEventListener) {
    element.addEventListener("submit", function(evt) {
        evt.preventDefault();
        window.history.back();
    }, true);
}
else {
    element.attachEvent('onsubmit', function(evt){
        evt.preventDefault();
        window.history.back();
    });
}

Answer 2

您可以使用函数的返回值来阻止表单的提交

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

并且函数如下：

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

如果在Chrome 27.0.1453.116 m中上述代码不起作用，请将事件处理程序的参数returnValue字段设置为false。

感谢Sam分享信息。

编辑：

感谢Vikram提供的解决方法，如果validateMyForm()返回false：

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

其中validateMyForm()是一个在验证失败时返回false的函数。关键点是使用名称event。我们不能使用例如e.preventDefault()