时间戳

首页 > 解决方案 > 检查空输入和显示消息的简单表单验证

javascript - 检查空输入和显示消息的简单表单验证

问题描述

我正在尝试一个简单的表单验证，如果输入字段为空，用户将看到一条消息，要求填写任何为空的字段。

我能够循环查找哪些字段为空并显示一条消息，但该消息只会显示循环的最后一个输入字段。如何获取消息以显示所有为空的输入字段？

HTML：

<label>Name</label>
<input class=formInput" name="name" />

<label>Email</label>
<input class=formInput" name="email" />

<label>Message</label>
<textarea class=formInput" name="message" />

<span id="fail-message"></span>

JS：

let inputFields = document.getElementsByClassName('formInput');

for (var i = 0; i < inputFields.length; i++) {
  if (inputFields[i].value === '') {
    document.querySelector('#fail-message').innerHTML =
      'Please fill out ' +
      inputFields[i].getAttribute('name') +
      ' field(s)';
  }
}

这当前输出“请填写消息字段”

假设全部为空，我希望它输出“请填写姓名、电子邮件和消息字段”

标签： javascriptforms

解决方案

每次找到空字段时，您的代码都会完全覆盖 innerHTML。相反，您应该做的是保留所有空字段的数组，然后在循环之后只编写一次 innerHTML 以及它找到的字段列表。

let inputFields = document.getElementsByClassName('formInput');
const emptyFieldNames = [];

for (var i = 0; i < inputFields.length; i++) {
  if (inputFields[i].value === '') {
    emptyFieldNames.push(inputFields[i].getAttribute('name'));
  }
}
if (emptyFieldNames.length > 0) {
    document.querySelector('#fail-message').innerHTML = 'Please fill out the following fields: ' + emptyFieldNames.join(', ');
}

推荐阅读