如何防止表单被提交？

Question

我有一个表单,其中有一个提交按钮.

但是,我想以某种方式'捕获'提交事件并防止它发生.

有什么方法可以做到这一点吗？

我无法修改提交按钮,因为它是自定义控件的一部分.

Answer 1

与其他答案不同,回报false只是答案的一部分.考虑在return语句之前发生JS错误的场景......

HTML

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

脚本

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

返回false此处将不会执行,表单将以任何方式提交.您还应该调用preventDefault以防止Ajax表单提交的默认表单操作.

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

在这种情况下,即使有错误,表单也不会提交!

或者,try...catch可以使用块.

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

Answer 2

您可以使用内联事件onsubmit这样

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

要么

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

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

演示

现在,在制作大型项目时,这可能不是一个好主意.您可能需要使用事件监听器.

请在此处阅读有关内联事件与事件侦听器(addEventListener和IE的attachEvent)的更多信息.因为我无法解释它比克里斯贝克做的更多.

两者都是正确的,但它们本身都不是"最佳",开发人员可能选择使用这两种方法.

Answer 3

使用事件监听器附加到表单.addEventListener(),然后调用.preventDefault()方法event:

const element = document.querySelector('form');
element.addEventListener('submit', event => {
  event.preventDefault();
  // actual logic, e.g. validate the form
  console.log('Form submission cancelled.');
});

<form>
  <button type="submit">Submit</button>
</form>

我认为这是一个比定义submit与onsubmit属性内联的事件处理程序更好的解决方案,因为它将网页逻辑和结构分开.维护一个逻辑与HTML分离的项目要容易得多.请参阅:不显眼的JavaScript.

使用DOM对象的.onsubmit属性form不是一个好主意,因为它会阻止您将多个提交回调附加到一个元素.请参阅addEventListener vs onclick .

Answer 4

试试这个......

HTML代码

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

jQuery代码

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

要么

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

Answer 5

以下工作截至目前(在chrome和firefox中测试):

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

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

Answer 6

var form = document.getElementById("idOfForm");
form.onsubmit = function() {
  return false;
}

Answer 7

为了防止表单提交，你只需要这样做。

<form onsubmit="event.preventDefault()">
    .....
</form>

通过使用上面的代码，这将阻止您的表单提交。