我有一个表单,其中某处有一个提交按钮。
然而,我想以某种方式“捕捉”提交事件并防止它发生。
有什么办法能让我做到吗?
我不能修改提交按钮,因为它是自定义控件的一部分。
我有一个表单,其中某处有一个提交按钮。
然而,我想以某种方式“捕捉”提交事件并防止它发生。
有什么办法能让我做到吗?
我不能修改提交按钮,因为它是自定义控件的一部分。
当前回答
为了遵循不引人注目的JavaScript编程惯例,并取决于DOM加载的速度,使用以下代码可能是个好主意:
<form onsubmit="return false;"></form>
然后使用onload或DOM ready(如果使用库)连接事件。
$(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>
此外,我总是使用动作属性,因为有些人可能有一些插件,如NoScript运行,然后会破坏验证。如果您正在使用action属性,至少您的用户将根据后端验证被服务器重定向。如果你使用window之类的东西。另一方面,地理位置会让事情变得糟糕。
其他回答
以下是目前为止的工作(在chrome和firefox测试):
<form onsubmit="event.preventDefault(); return validateMyForm();">
其中validateMyForm()是一个函数,如果验证失败则返回false。关键是使用名称事件。我们不能使用例如e.c epreventdefault ()
试试这个……
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.");
});
});
or
$(function(){
$('.submit').on('submit', function(event){
event.preventDefault();
event.stopPropagation();
alert("Form Submission prevented / stopped.");
});
});
与其他答案不同,返回false只是答案的一部分。考虑这样一个场景:JS错误发生在return语句之前…
html
<form onsubmit="return mySubmitFunction(event)">
...
</form>
脚本
function mySubmitFunction()
{
someBug()
return false;
}
这里返回false将不会被执行,表单将以任何一种方式提交。还应该调用preventDefault来防止Ajax表单提交的默认表单操作。
function mySubmitFunction(e) {
e.preventDefault();
someBug();
return false;
}
在这种情况下,即使有bug,表单也不会提交!
或者,尝试…可以使用Catch块。
function mySubmit(e) {
e.preventDefault();
try {
someBug();
} catch (e) {
throw new Error(e.message);
}
return false;
}
为了防止表单提交,你只需要这样做。
<form onsubmit="event.preventDefault()">
.....
</form>
通过使用上述代码,这将阻止您的表单提交。
var form = document.getElementById("idOfForm");
form.onsubmit = function() {
return false;
}