javascript - 将表单中的所有输入收集到 JS 数组中

Question

我正在使用一个存储库应用程序，用户可以在其中提交文章、文件、链接等。我正在创建一些 javascript 验证，但我的问题是我有多个部分(模板文件)，并且每个部分使用不同的 ID 和每种提交作品的名称。我为我们的主要工作类型文章编写了一个简单的 javascript 验证。我的问题是，我必须为其他类型以及我们以后可能添加的任何其他类型可持续地复制此功能。

我目前的代码正在执行以下操作:

html 表单:

<form onsubmit="event.preventDefault(); return validateRequiredTitleByID()">
    <textarea id="article-title" name="article[title]"></textarea>
    <textarea id="article-abstract" name="article[abstract]"></textarea>
    <a href="action/something" class="btn btn-primary btn-link">Submit</a>
</form>

验证器.js:

function isValid(requiredField) {
    if (requiredField === null || requiredField === " ") {
        return false;
    }
    else return true;
}

function validateRequiredTitleById() {
    var inpObj = document.getElementById("article_title").value;
    if (!isValid(inpObj)) {
        document.getElementById("invalid-input-alert").style.visibility = "visible";
        return false;
    }
    alert('validations passed');
    document.forms['new_work_form'].submit();
    return true;
}

验证器对于单个字段工作得很好，但是我很难弄清楚如何以简洁的方式将此验证器应用于每种工作类型的每个必需字段，而无需手动定义每个方法每个领域。

我正在考虑编写一些东西，将具有“required”类(应用程序中预先存在的帮助器类)的每个元素拉入一个数组，然后在 for 循环中验证每个元素，但我不确定我如何实际扫描 html 中的元素以将它们拉入脚本中。

更新:我尝试使用 getElementsByClassName('no-space') ，其中 no-space 是我用来选择每个值的类。通过 validator.js 现在是这样的:

function isValid(requiredField) {
 if (requiredField === null || requiredField === " ") {
  return false;
 }
 else {
  return true;
 }
}

function validateAllFields() {
    var inputs = document.getElementsByClassName('no-space');
    for (var i = 0; i < inputs.length; i+=1) {
        if(!isValid(inputs[i])) {
            alert('no!');
        }
        else {
            alert('yes!');
            console.log(inputs[i]);
        }
    }
}

此时，输入数组正在将两个输入元素收集到我需要实际输入值的数组中。我尝试了 inputs = document.getElementsByClassName('no-space').value; 但它引发了一个函数未定义错误。

已答复!对于其他有此问题的人，这是我的最终解决方案:

function isValid(requiredField) {
 if (requiredField === null || requiredField === " ") {
  return false;
 }
 else {
  return true;
 }
}

function validateAllFields() {
    var inputs = document.getElementsByClassName('no-space');
    for (var i = 0; i < inputs.length; i+=1) {
        if(!isValid(inputs[i].value)) {
            alert('no!');
        }
        else {
            alert('yes!');
            console.log(inputs[i].value);
        }
    }
}

Answer 1

一种解决方案是将一个类应用于所有输入字段，然后按类型创建一个元素数组，这就是我完成此操作的方法，并且能够更好地迭代以前需要唯一 ID 的内容。示例:

var elementArray = document.getElementsByClassName('unique-class');

您还可以使用标签名称创建数组，如下所示:

var inputs = document.getElementsByTagName('input');

有关 getElementsByTagName() 的更多信息，您可以在此处查看更多详细信息和示例:

https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName