时间戳

首页 > 解决方案 > 禁用表单提交按钮，直到填写所有输入/文本区域字段，而不使用 for 循环（无 jQuery）

javascript - 禁用表单提交按钮，直到填写所有输入/文本区域字段，而不使用 for 循环（无 jQuery）

问题描述

我有以下联系表格：

<form id="post">
  <label for="name">Name</label>
  <input id="name" name="name" type="text">
  <label for="surname">Surname</label>
  <input id="surname" name="surname" type="text">
  <label for="email">E-mail</label>
  <input id="email" name="email" type="text">
  <label for="subject">Object</label>
  <input id="subject" name="subject" type="text">
  <label for="text">Text</label>
  <textarea id="text" name="text"></textarea>
  <button type="submit" disabled>Submit</button>
  <!-- Honeypot -->
  <div style="position:absolute;left:-5000px" aria-hidden="true">
    <input type="text" name="ijdssliouhois8ds8989sd" tabindex="-1" value="">
  </div>
  <!-- /Honeypot -->
</form>

为了禁用提交按钮，直到填写所有输入/文本区域字段，我使用以下代码：

post.oninput = function() {
  var empty = false;
  for (var i = 0; i < 5; i++) {
    if (post[i].value.trim() === "") {
      empty = true;
    }
  }
  if (empty) {
    post[5].disabled = true;
  } else {
    post[5].disabled = false;
  }
};

它完美地工作。

post.oninput = function() {
  var empty = false;
  for (var i = 0; i < 5; i++) {
    if (post[i].value.trim() === "") {
      empty = true;
    }
  }
  if (empty) {
    post[5].disabled = true;
  } else {
    post[5].disabled = false;
  }
};
<form id="post">
  <label for="name">Name</label>
  <input id="name" name="name" type="text">
  <label for="surname">Surname</label>
  <input id="surname" name="surname" type="text">
  <label for="email">E-mail</label>
  <input id="email" name="email" type="text">
  <label for="subject">Object</label>
  <input id="subject" name="subject" type="text">
  <label for="text">Text</label>
  <textarea id="text" name="text"></textarea>
  <button type="submit" disabled>Submit</button>
  <!-- Honeypot -->
  <div style="position:absolute;left:-5000px" aria-hidden="true">
    <input type="text" name="ijdssliouhois8ds8989sd" tabindex="-1" value="">
  </div>
  <!-- /Honeypot -->
</form>

但我想使用诸如 , 或 - 如果可能的话（就性能而言最好的方法）来实现.filter相同的结果.find。.map.some

你能给我一些建议吗？

标签： javascripthtmlformsvalidation

解决方案

使用:scope > [name]查询字符串选择类似于输入的表单子项，如果.some其中未填写，请禁用该按钮：

const post = document.querySelector('form');
post.oninput = function() {
  post.querySelector('button').disabled = [...post.querySelectorAll(':scope > [name]')]
    .some(input => !input.value.trim())
};
<form id="post">
  <label for="name">Name</label>
  <input id="name" name="name" type="text">
  <label for="surname">Surname</label>
  <input id="surname" name="surname" type="text">
  <label for="email">E-mail</label>
  <input id="email" name="email" type="text">
  <label for="subject">Object</label>
  <input id="subject" name="subject" type="text">
  <label for="text">Text</label>
  <textarea id="text" name="text"></textarea>
  <button type="submit" disabled>Submit</button>
  <!-- Honeypot -->
  <div style="position:absolute;left:-5000px" aria-hidden="true">
    <input type="text" name="ijdssliouhois8ds8989sd" tabindex="-1" value="">
  </div>
  <!-- /Honeypot -->
</form>

如果它符合您的需要，您也可以使用该required属性，尽管该按钮不会显示为禁用 - 相反，它会将用户重定向到下一个必填字段：

<form id="post">
  <label for="name">Name</label>
  <input required id="name" name="name" type="text">
  <label for="surname">Surname</label>
  <input required id="surname" name="surname" type="text">
  <label for="email">E-mail</label>
  <input required id="email" name="email" type="text">
  <label for="subject">Object</label>
  <input required id="subject" name="subject" type="text">
  <label for="text">Text</label>
  <textarea required id="text" name="text"></textarea>
  <button type="submit">Submit</button>
  <!-- Honeypot -->
  <div style="position:absolute;left:-5000px" aria-hidden="true">
    <input type="text" name="ijdssliouhois8ds8989sd" tabindex="-1" value="">
  </div>
  <!-- /Honeypot -->
</form>

推荐阅读