使用提交事件监听器停止表单提交

Question

我正在尝试使用提交事件监听器阻止表单提交。我的匿名函数运行但表单仍然提交，即使在函数末尾返回 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>

Answer 1

嗯，这就是我会做的方式：

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

Answer 2

为了防止表单提交，我一直使用“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;
  }
}

Answer 3

我总是在要取消事件的事件侦听器上调用event.preventDefault()，并返回false。这总是对我有用。

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

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

}, false);
</script>