导致表单在未经验证的情况下提交的声明

statement causing form to submit without validation

本文关键字：情况下 提交 声明 验证 表单      更新时间：2023-09-26

我一直在撕头发，试图弄清楚为什么在if语句中添加一行文本会导致表单提交而无需验证。

以下是导致问题的代码部分：

var firstName = document.getElementById("firstName");
// if first name is empty
if (firstName.value == "") {
    var fnError = document.getElementById("fnError");
    fnError.innerHTML = "*Please enter your first name";
    fnResult = false;
} else { 
    // Store firstName using local storage
    localStorage.setItem("firstName", firstName.value);
}

我正在尝试在 else 语句中输入以下代码行：

fnError.innerHTML = "";

表单使用 onsubmit 事件处理程序进行验证：

var btnSubmit = document.getElementById("formUser");
btnSubmit.onsubmit = validate;

验证函数返回true或false，具体取决于是否满足验证的条件。所有这些目前都运行良好，直到我尝试添加该行代码，然后在下次用户按下提交按钮时发送表单，无论是否满足条件。

我是 JavaScript 的新手，所以我可能错过了一些明显的东西。

非常感谢！

下面是一个可能的问题：如果将违规行插入到代码中，如下所示，则函数在返回值之前失败。在"else"块中，fnError 将在范围内，但其值将是未定义的。尝试在未定义的值上设置属性会导致错误。

} else { 
    // Store firstName using local storage
    fnError.innerHTML = "";
    localStorage.setItem("firstName", firstName.value);
}

要解决此问题，请将以下行移到"if"块之前：

var fnError = document.getElementById("fnError");

现在，fnError 变量将在 "if" 和 "else" 块中包含对错误消息元素的有效引用。

相关文章：