在 for-in-Loop 之后执行代码的问题

Question

我有一个添加了多个动态行的表单，我想在提交表单之前对输入做一些验证，例如检查是否所有字段都有输入等。所以当我的提交按钮上有一个 onclick 事件时，我调用这个小函数：

function validateAndSubmit() {
var form = document.getElementById("mainForm");
var formGroups = document.getElementsByClassName("form-group");
for (var x in formGroups) {
    // Validation goes here
    ....
    if (valid == false) {
        return;
    }
}
form.submit();

所以按照我的逻辑，代码应该遍历每个表单组（基本上代表表单中的各个行）并检查它们是否有效。在第一个无效行之后，该函数将 return 没有任何结果。但是，如果所有的 formGroups 都被选中，for 循环将退出并且 form.submit(); 调用将提交表单。

但是，最终提交并没有发生。即使所有表单元素都有有效输入，表单也不会提交。然而，在一些调试过程中，我注释掉了整个 for 循环，并且表单提交了，但当然没有验证。所以我假设 for 循环无法正常退出，可能需要一些帮助来解决这个问题。

整个项目都是用普通的 Javascript 编写的，但是，我使用的库是基于 jQuery 动态地向表单添加和删除项目。

作为参考，您可以在网上找到该项目here

Answer 1

你一开始就不应该使用 for-in。只需使用 plain for form:

for(var i=0;i<formGroups.length;i++)

记住，for-in 用于对象/字典。例如。 {'key':'value'}

您进入循环的第一个 "x" 是 "length" - 您的 formGroups[x] 变成了 formGroups[undefined] 并立即抛出异常。

Answer 2

您也可以使用 jQuery 选择器来获取元素。在您的示例中，

$('.form-control').each(function() {
    // Validation goes here
    console.log($(this));
});

在 for-in-Loop 之后执行代码的问题

Problems with executing code after a for-in-Loop

javascript

forms

for-loop

submit