Question

我正在尝试使用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>

Answer 1

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

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

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

}, false);
</script>

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

这就是我这样做的方式：

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

使用提交eventlistener停止表单提交

3 个答案: