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

【问题标题】：Page reloading after form submission despite novalidate and false return尽管没有验证和错误返回，但表单提交后页面重新加载
【发布时间】：2023-03-25 13:31:01
【问题描述】：

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

我在 HTML 的表单中使用了novalidate，我在我的函数中返回了false，该函数在表单提交时被调用，所以我不确定问题出在哪里。我的代码附在这个 CodePen 中：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);
    };
})();

【问题讨论】：

标签： javascript html forms validation reload

【解决方案1】：

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

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

调用preventDefault方法或将returnValue设置为false（对于

【讨论】：

【解决方案2】：

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

【讨论】：

我可以看到这是可行的，但我正在寻找一种在我编写的 javascript 中执行此操作的方法，而不是在 HTML 中混淆任何内容。你有什么想法？为什么在 addTask 函数中返回 false 不能自行工作？