我正在尝试使用submit eventlistener停止提交表单。我的匿名函数运行但表单仍然提交,即使在函数结束时返回false。没有抛出JS错误。
我犯了一些愚蠢的错误吗?
<form id="highlight">
Row: <input type="text" name="rows" value="1" id="rows">
Column: <input type="text" name="cells" value="1" id="cells">
<input type="submit" name="Submit" value="Highlight" id="Submit">
</form>
<script>
var highlight_form = document.getElementById('highlight');
highlight_form.addEventListener('submit', function() {
alert('hi');
return false;
}, false);
</script>
答案 0 :(得分:9)
我总是在我要取消事件的事件监听器上调用event.preventDefault()
,并返回false
。这总是适合我。
<script>
var highlight_form = document.getElementById('highlight');
highlight_form.addEventListener('submit', function(event)
{
event.preventDefault();
alert('hi');
return false;
}, false);
</script>
答案 1 :(得分:1)
为了防止表单提交,我总是使用“onclick”事件来调用javascript方法,该方法将执行某些操作然后从那里提交。您也可以按如下方式设置表单:
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
提交后,validateForm()方法可以在必要时阻止提交:
function validateForm()
{
var x=document.forms["myForm"]["fname"].value
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
答案 2 :(得分:0)
这就是我这样做的方式:
function validate (form)
{
// return false if some fields are not right
}
function setup_form_validation (form)
{
form.addEventListener (
'submit',
function (f) { // closure to pass the form to event handler
return function (evt) {
if (!validate (f)) evt.preventDefault();
// Return status doesn't work consistently across browsers,
// and since the default submit event will not be called in case
// of validation failure, what we return does not matter anyway.
// Better return true or nothing in case you want to chain other
// handlers to the submit event (why you would want do that is
// another question)
};
} (form),
false);
}
我宁愿拥有一个保持表单验证状态的布尔值。每次字段更改时,只有在用户尝试提交整个表单时才更好地更新状态。
当然,这将在IE8和其他旧版浏览器中失败。你需要另一个血腥事件抽象层才能让它在任何地方都能运作。