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>

validator.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

Answer 2

有很多解决方案。

：输入选择器

如果要获取表单标记内的所有输入，可以使用：input selector：

执行此操作

的jQuery

var $inputs = jQuery('form').find(':input');

原生Javascript

var $form = document.getElementById('my-form');
var $inputs = $form.getElementsByTagName('input');

_{注意：本地解决方案将忽略select标记}

添加额外课程

正如Kyle L.所写，如果您为所有输入添加额外的课程，您可以选择：

HTML 的

<input type="text" name="my-input" class="input-field" />

的jQuery

var $inputs = jQuery('form).find('.input-field');

原生Javascript

var $form = document.getElementById('my-form');
var $inputs = $form.getElementsByClassName('input-field');

咏叹调-需要

您可以使用aria来验证必填字段。

HTML 的

<input type="text" name="my-input" aria-required="true" />

的jQuery

var $inputs = jQuery('form').find('[aria-required]');

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

2 个答案:

：输入选择器

添加额外课程

咏叹调-需要