Question

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

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

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)';
  }
}

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

假设所有内容均为空，我希望它输出“请填写姓名，电子邮件和消息字段”

Answer 1

您找到的代码每次发现一个空字段时都会完全覆盖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(', ');
}

Answer 2

您将在每次迭代中覆盖消息范围的innerHTML。您应该将新错误串联起来，或使用单独的跨度。

Answer 3

您将必须构建一个包含无效字段名称的数组...现在，您用最新字段“覆盖”＃fail-message元素的innerHTML（又名，它位于循环到每次在循环中满足条件时都将被重写）。

在数组中添加字段的名称（不要重写整个数组），然后使用“ yourArray.join（）”在正确元素的innerHTML中输出所有名称，就像在循环中一样。 / p>

Answer 4

每次循环时，都将替换span元素中的值。因此，只有最后一个空的表单元素将显示为失败消息。相反，您必须连接每个字符串，然后一起显示。

以下是适合您的完整代码：

<html>
<head>
    <script>
        function myFunction() {
            let inputFields = document.getElementsByClassName('formInput');
            let message =''; 
            for (var i = 0; i < inputFields.length; i++) {
                console.log(inputFields[i].value);
                if (inputFields[i].value === '') {
                        message = message + inputFields[i].getAttribute('name') + ', ';
                }
            }

            let n = message.lastIndexOf(",");
            message = message.substring(0,n); 

            document.querySelector('#fail-message').innerHTML =
                'Please fill out ' +
                message +
                ' field(s)';
        }
    </script>
</head>

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

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

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

    <button onclick="myFunction()">Submit</button>

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

</html>

简单表单验证以检查空输入并显示消息

4 个答案: