用提交eventlistener停止表单提交

我试图阻止提交使用提交eventlistener的表单。我的匿名函数运行，但表单仍然提交，即使函数结束时返回false。没有JS错误被抛出。用提交eventlistener停止表单提交

我在犯些愚蠢的错误吗？

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

来源

2011-05-06 Ian McIntyre Silber

[addEventListener提交表单返回false仍然可以提交表单？]（http://stackoverflow.com/questions/4924036/return-false-on-addeventlistener-submit-still-submits-the-form） – unor 2013-09-16 11:38:18

我一直呼吁，我想取消该事件的事件侦听器event.preventDefault()，以及回报false。这总是适合我。

<script> 
var highlight_form = document.getElementById('highlight'); 

highlight_form.addEventListener('submit', function(event) 
{ 
    event.preventDefault(); 
    alert('hi'); 
    return false; 

}, false); 
</script>

来源

2011-05-06 19:08:29

当我更改返回false返回true（或返回）时，不适用于我。 – zeuf 2014-06-13 13:34:17

@zeuf并仍然使用'event.preventDefault（）'或否？ – 2014-06-13 17:10:06

为了防止表单提交，我一直使用的“点击”事件来调用JavaScript方法，将做一些事情，然后从那里提交。您还可以设置如下形式：

function validateForm() 
{ 
var x=document.forms["myForm"]["fname"].value 
if (x==null || x=="") 
    { 
    alert("First name must be filled out"); 
    return false; 
    } 
}

来源

2011-05-06 19:11:57 Kyle

嗯，这是我会做的方式：

<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 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和其他旧浏览器中失败。您需要另一个血腥事件抽象层才能使其在任何地方都能正常工作。

来源

2013-12-17 20:18:25

用提交eventlistener停止表单提交

回答

相关问题