验证包含多个元素的表单吗？

Question

我的表单具有多个元素/类型

1. 输入姓名，电子邮件，地址等
2. 单选按钮表示运送速度。
3. 选择“状态”和“信用卡类型”的标签。

我想禁用提交按钮，直到：

1。输入已填写。

2. 选择标签已选择一个选项

3. 已检查收音机。

我已经选择了元素（见下文）；

const btn = document.querySelector('#olegnax-osc-place-order-button');

let inputs = document.querySelectorAll('#olegnax-osc-billing-address-list .required-entry, input#authorizenet_cc_number');
let selectTags = document.querySelectorAll('#olegnax-osc-billing-address-list select, #payment_form_authorizenet select');
let radio = document.querySelector('#s_method_owebiashipping1_id_06');

我的问题是，表单是由3种不同的类型（输入，选择，单选）组成的，我可以只创建一个包含所有这些元素的数组并循环以确保每个元素的值都不为空吗？

例如，说我将所有不同的元素存储在一个名为“ requiredFields”的数组中，这样可以吗？：

for (var i = 0; i < requiredFeilds.length; i++) {
  if (requiredFeilds[i].value === '') {
    btn.disabled = true;
  }else {
    btn.disabled = false;
  }
}

Answer 1

进行表单验证的方法比实际需要的要多得多，但那是说您的逻辑存在重大缺陷。即，当您遍历所有字段时，可能会根据表单字段的值（或缺少值）来回更改btn.disabled。

相反，从禁用按钮开始，然后使用Array.prototype.some（请参阅：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some）来检查是否有任何字段缺少值，例如：

btn.disabled = requiredFields.some(field => field === '');
关于您的方法还有很多其他要解决的问题，但这可以纠正您当前的逻辑错误，并且更加简洁。

Answer 2

您可以轻松浏览除单选按钮以外的所有内容。对于单选按钮，您要检查是否已选中在单选组中]中的任何按钮，因此有点复杂。仅使用checked属性将单选按钮指定为默认值可能会更容易：

Answer 3

是，只需组合选择器并使用逗号，然后检查tagName：