表单提交后重新加载页面，尽管没有验证和错误返回

Page reloading after form submission despite novalidate and false return

本文关键字：验证 返回 错误 新加载 加载 表单提交      更新时间：2023-09-26

我开始在JS中研究任务列表制作者的骨架，没走多远就注意到，通过表单提交任务后，整个页面都会重新加载，所以我无法设置文本而不会立即消失。

我在 HTML 的表单中使用了novalidate，并且我在函数中返回了在表单提交时调用false，所以我不确定问题是什么。 我的代码附在此代码笔中：http://cdpn.io/JArfm

一些相关代码：

.HTML：

<body>
    <form action="#" method="post" id="theForm" novalidate="">
        <fieldset><legend>To-dolist</legend>
            <p>Add things to-do on your list</p>
            <div class="addTasks"><label for="addTask">Event name:</label><input type="text" name="addTask" id="addTask" value="addTask"></div>
            <div><input type="submit" value="Add task!" id="submit"></div>
            <div id="output"></div>
        </fieldset>
    </form>
</body>

.JS：

(function(){
    function addTask(e){
    'use strict';
    if (typeof e == 'undefined') e = window.event;
    var task = U.$('addTask').value;
    U.setText('output', task);
    return false;
    }

    window.onload = function(){
        "use strict";
        U.addEvent(U.$('theForm'), "submit", addTask);
    };
})();

显然，在使用传统事件注册模型 （element.onsubmit = doThis;） 时，在事件处理程序函数中返回 false 只会正确停止表单提交。 由于我使用的是 addEventListener 和 attachEvent 函数，因此处理此问题的正确方法（不修改标记）是将其添加到我的事件处理程序函数的末尾：

if (e.preventDefault) {
    e.preventDefault();
} else {
    e.returnValue = false;
}
return false;

调用 preventDefault 方法或将returnValue设置为 false（对于 <IE9）可有效阻止表单提交。>

阻止输入按钮的默认操作。你可以通过JQuery的preventDefault（）函数来做到这一点。或者只是<form onsubmit="return false;"> ... </form>

相关文章：