javascript - 表单验证不会忽略空的输入字段对，因为它应该将其发送到有效负载

Question

我在一个具有多个依赖项的大型项目中使用 knockout.js，这就是我无法创建演示的原因。但是，我有一个动态表单，可以添加/删除用户名和密码的多个输入字段对，如下所示:

Input field1: [_________] : [_________] x
Input field2: [_________] : [_________] x
Input field3: [_________] : [_________] x
Input field4: [_________] : [_________] +

这会在提交时创建一个对象，例如:

{
    credentials:{
        Username1: password1,
        Username2: password2,
        Username3: password3,
        Username4: password4,
    }
}

表单验证:

1. 如果至少一行用户名和密码不为空，忽略所有其他空行。但是，如果所有用户名和密码条目都是空，然后抛出错误信息。
2. 如果输入字段行中的用户名或密码为空，则抛出一个错误。
3. 如果用户名重复，抛出错误。

结果:

我几乎可以验证所有内容，除非输入字段的第一行是空的，而其他行不是。

问题:

如果除“Input field1”之外的任何输入字段的用户名和密码为空，它将忽略该行。但是，如果“输入字段 1”的用户名和密码字段为空，而其他字段不为空，则不会忽略第一行，而是会抛出错误。它可以是一系列多个输入字段为空，只有最后一个不为空。

Javascript:

// make sure we visit every entry to ensure
// that we highlight each validation error
userpassEntries.forEach(function(displayEntry) {
    var username = displayEntry.username;
    var password = displayEntry.password;

    // reset the error message to get new ones (if any)
    displayEntry.errUsername(null);
    displayEntry.errPassword(null);

    if (username === '' && password === '') {
        // If at least one row of username and password
        // is not empty ignore all other empty rows.
        // But if all username and password entries are
        // empty, then throw the following error message.
        if (Object.keys(credentials).length === 0) {
            displayEntry.errUsername('Please enter a username');
            displayEntry.errPassword('Please enter a password');
            // mark invalid
            isValid = false;
        }
        // ignore the the entry
        return;
    } else if (username !== '' && password === '') {
        displayEntry.errPassword('Please enter a password');
    } else if (username === '' && password !== '') {
        displayEntry.errUsername('Please enter a username');
    } else if (
        userpassEntries.filter(function(user) {
            return user.username === username;
        }).length > 1
    ) {
        displayEntry.errUsername('Duplicate username');
    } else {
        // if the fields had values and vlaidation passed we can safely add them
        credentials[username] = password;
    }

    if (isValid) {
        isValid =
            displayEntry.errUsername() === null &&
            displayEntry.errPassword() === null;
    }
});

if (!isValid) {
    // do not proceed to save if there were any invalid fields
    return;
}

payload = {
    credentials: credentials
};

that.onSubmit(payload);

问题:

我怎样才能忽略空输入字段的行并仍然捕获其余的填充字段？

示例场景:

Input field1: [_________] : [_________] // This should be ignored but it is not working
Input field2: [Username2] : [password2]
Input field3: [Username3] : [password3]
Input field4: [_________] : [_________] // This is getting ignored at the payload

以下仍应发送忽略前两个条目的最后一个条目

Answer 1

这看起来很简单。我不太确定你的代码哪里出了问题，但我写了一些非常相似的东西，它似乎工作正常。

function validate () {
    var validCredentials = {};

    vm.credentials.forEach(function (credentialObj) {
        credentialObj.errorMsg('');

        if (validCredentials.hasOwnProperty(credentialObj.username())) {
            credentialObj.errorMsg('Duplicate username!');
        } else {
            if (credentialObj.username() && credentialObj.password()) {
                validCredentials[credentialObj.username()] = credentialObj.password();
            } else {
                credentialObj.errorMsg('Please enter a username and/or password');
            }
        }
    });

    // now validCredentials will contain the valid credentials as key/value pairs
    vm.validCredentials(JSON.stringify(validCredentials));
}

工作 fiddle :https://jsfiddle.net/thebluenile/4ox92gz7/