在表单提交上关注第一个错误字段时，如何解决 Vendor.js 中的“未捕获的类型错误：无法读取未定义的属性 'charAt'”错误？

Question

我目前正在解决提交时表单中第一个错误字段的焦点问题。尽管成功实现了在提交时关注表单中第一个错误字段的功能，但我在实现后遇到了挑战。以下是详细概述：

环境设置：Ember 3.14 在 Node 10.8.0 上运行，并使用 Mirage 进行服务器 API 模拟。

目标：主要目的是确保在提交表单时，初始错误字段会引起用户注意。

采用的方法： 为了实现此功能，我成功地实现了代码来识别指定表单中标有错误类的所有元素。随后，我有效地关注了第一个识别出的错误元素。这种方法按预期发挥作用，在提交表单时无缝突出显示第一个错误字段。

遇到的挑战： 成功实施后，许多测试用例始终失败并显示错误消息：未捕获的类型错误：无法读取未定义的属性“charAt”。值得注意的是，手动测试确认了修复程序的正确功能。然而，这些失败都可以追溯到 Vendor.js 文件。有趣的是，失败的 charAt() 调用并不存在于原始供应商代码中，而是出现在编译后的vendor.js 文件中，尤其是在 polyfill 中。此外，由于 eval 语句中存在 charAt() 调用，调试一直具有挑战性。

测试用例的性质： 更新并提交：验证请求操作在用户提交后是否更新为“提交”。 已完成的请求只读：检查已完成的请求是否将特定元素呈现为禁用或只读。 编辑请求：确保用户可以编辑请求、更新说明并顺利离开页面。 打开和关闭请求：测试打开和关闭请求是否保留当前页面 URL，而不会出现任何停留提示。

我尝试过的： 我成功实现了在提交时关注表单中第一个错误字段的功能，解决了最初的错误。这涉及识别指定表单中标有错误类的所有元素，并确保第一个识别的错误元素获得焦点。

期望： 实现后，我希望实现的功能能够无缝工作，重点关注预期的第一个错误字段。然而，虽然实现本身运行正常，但我在某些测试用例方面面临着挑战。尽管功能按预期工作，但这些测试用例始终失败。目的仍然是提供有关输入错误的即时反馈并促进更顺畅的表单交互。

这里是代码参考，所有测试用例都运行良好，但是当我们添加代码以聚焦第一个输入时，达到了预期结果，但测试用例开始失败：

focusFirstErrorInForm(element) {
const parentForm = this.gettingParticularForm(element);
console.log(parentForm);
if (parentForm) {
    setTimeout(() => {
        const errorContainer = this.gettingErrorContainer(parentForm);
        if (errorContainer) {
            if (errorContainer.length > 0) {
                let firstInput = this.gettingFirstErrorFromContainer(errorContainer);
                if (firstInput !== null || firstInput !== undefined) {
                    firstInput.focus();
                }
            } else {
                this.getErrorKcContainer(parentForm);
            }
        }
    }, 100);
}

}

测试用例失败消息 - 留言：> 未捕获的类型错误：无法读取未定义的属性“charAt” 负面：> 错误的 浏览器日志：|

还在测试用例之间添加控制台日志进行调试，令人惊讶的是所有控制台都被记录下来。

Answer 1

空检查的逻辑对我来说看起来不正确。我只是检查该对象是否真实

if (firstInput) {
    firstInput.focus();
}

也许检查它是否有焦点方法......

if (firstInput && firstInput.focus) {
    firstInput.focus();
}

如果你真的想明确的话我 认为你应该使用 && （和）而不是 || （或）...

if (firstInput !== null && firstInput !== undefined) {
    firstInput.focus();
}