如何防止表单被提交？
我有一个在其中有一个提交button的表单。
但是，我想以某种方式“抓住”提交事件并阻止它发生。
有什么办法可以做到这一点？
我无法修改提交button，因为它是自定义控件的一部分。
与其他答案不同，返回false只是答案的一部分 。 考虑在返回语句之前发生JS错误的场景…
HTML
<form onsubmit="return mySubmitFunction()"> ... </form>
脚本
function mySubmitFunction() { someBug() return false; }
在这里返回false将不被执行，表单将被提交。 您还应该调用preventDefault来防止Ajax表单提交的默认表单操作。
function mySubmitFunction(evt) { evt.preventDefault(); someBug(); return false; }
在这种情况下，即使有错误，表单也不会提交！
或者，可以使用try...catch块。
function mySubmit(evt) { evt.preventDefault(); try { someBug(); } catch (e) { throw new Error(e.message); } return false; }
你可以像这样使用内联事件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）的更多信息 。 因为我不能比克里斯·贝克（Chris Baker）做得更多。
两者都是正确的，但是它们本身都不是“最好的”，开发者可能会select使用这两种方法。
使用.preventDefault()将一个事件侦听器附加到表单上，然后在event上调用.preventDefault()方法：
const element = document.querySelector('form'); element.addEventListener('submit', event => { event.preventDefault(); // actual logic, eg validate the form console.log('Form submission cancelled.'); });
<form> <button type="submit">Submit</button> </form>
试试这个…
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 stoped."); }); });
要么
$(function(){ $('.submit').on('submit',function(event){ event.preventDefault() ; event.stopPropagation(); alert("Form Submission prevented / stoped."); }); });
var form = document.getElementById("idOfForm"); form.onsubmit = function() { return false; }
以下工作截至目前（在铬和Firefoxtesting）：
<form onsubmit="event.preventDefault(); return validateMyForm();">
其中validateMyForm（）是一个函数，如果validation失败则返回false 。 关键是要使用名称event 。 我们不能用于例如e.preventDefault()
要遵循不引人注意的JavaScript编程约定，并根据DOM将加载的速度，使用以下内容可能是一个好主意：
<form onsubmit="return false;"></form>
然后使用onload或DOM准备好事件，如果你正在使用一个库。
$(function() { var $form = $('#my-form'); $form.removeAttr('onsubmit'); $form.submit(function(ev) { // quick validation example... $form.children('input[type="text"]').each(function(){ if($(this).val().length == 0) { alert('You are missing a field'); ev.preventDefault(); } }); }); });
label { display: block; } #my-form > input[type="text"] { background: cyan; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="my-form" action="http://google.com" method="GET" onsubmit="return false;"> <label>Your first name</label> <input type="text" name="first-name"/> <label>Your last name</label> <input type="text" name="last-name" /> <br /> <input type="submit" /> </form>
