javascript - 检查是否所有表单域都有输入 jQuery

Question

我的页面上有一个表单，我想通过 jQuery 禁用提交按钮，直到所有表单字段都有一个值。我也有服务器端验证，但我宁愿使用一些客户端验证来减轻服务器的压力。我目前将表单的所有元素保存在一个数组中，然后遍历每个元素并检查是否有任何元素为空。每次用户在表单中输入数据时，我还需要调用此函数，以检查是否所有输入都已填写。这似乎给我的浏览器带来了巨大的压力并导致页面崩溃，下面是代码。

let inputArray = [
            $('.registration-form #inputEmail'),
            $('.registration-form #inputForename'),
            $('.registration-form #inputSurname'),
            $('.registration-form #inputJobTitle'),
            $('.registration-form #inputJobFunction'),
            $('.registration-form #inputCompanyName'),
            $('.registration-form #inputCompanySize')
        ];

        let $registerButton = $('.create-account-button');

        function checkFields() {
            inputArray.forEach(function (input) {
                if (!$(input).val()) {
                    $registerButton.prop('disabled', true);
                } else {
                    $registerButton.prop('disabled', false);
                }
                input.on('input', checkFields);
            });
        }

Answer 1

根据我的评论:您的问题过于复杂了——您的浏览器崩溃的原因是因为您正在调用 checkFields在无限循环中。你想做的很简单:

1. 为您要验证的所有输入字段提供一个类，比如给它们一个类 validate
2. 绑定(bind) onInput调用这些输入字段的事件。当提供元素集合时，jQuery 将自动迭代绑定(bind)相同的事件处理程序
3. 在onInput的回调中事件，您只需要检查是否有任何字段为空的逻辑。这是通过使用 .map() 完成的然后 .filter()返回空字段数组。通过检查此数组的长度有条件地禁用/启用提交按钮。

第 3 点理解起来可能有点复杂，下面是它的分解:

• .map()用于返回类似数组的对象。使用 return this.value在回调函数中意味着您想将每个输入的值推送到这个 arrya。
• .get()在此之后链接，因为 .map()不返回真正的数组
• .filter()用于从数组中删除不为空的项，使用当数组项的长度(在本例中为输入元素的值)为 0 时返回 true 的回调函数

这将返回一个空字段数组。然后您可以使用 .prop('disabled', <boolean>)有条件地启用或禁用提交按钮。 !!emptyFields.length表达式用于确保返回 bool 值:

• 当没有空字段(长度为0)时，!!0返回 false。
• 当有空域(长度>=1)时，!!<n>返回真。

---

请参阅下面的概念验证:

$(function() {
  // Cache fields that you want to validate
  var $fieldsToCheck = $('.registration-form .validate');
  
  // Function to ensure fields are not empty
  var checkFields = function() {
    // Get array of empty fields
    var emptyFields = $fieldsToCheck.map(function() {
      return this.value;
    }).get().filter(function(val) {
      return val.length === 0;
    });
    
    // Disabled prop to be toggled based on length of empty fields
    $('.create-account-button').prop('disabled', !!emptyFields.length);
  };

  // Bind onInput event to all inputs you want to check
  $fieldsToCheck.on('input', checkFields);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="registration-form">

  <input name="email" class="validate" type="text" />
  <input name="forename" class="validate" type="text" />
  <input name="surname" class="validate" type="text" />

  <button class="create-account-button" disabled>Create account</button>

</form>