仅当所有表单字段在表单提交之前都有类时，jQuery才启用提交按钮

Question

我的引导门户中有两个表单，默认情况下，两个表单提交按钮都被禁用。

我正在使用on('input', function () {} 验证所有表单输入字段并分配is-valid 类。

如果表单中的所有字段都具有is-valid 类和下面的 jQuery 函数，我正在尝试启用提交按钮：

$forms = $("#form1, #form2");

$forms.each(function () {
  $formsInputs = $(this).find(".form-control");
  $formsInputs.each(function () {
    $(this).on('keyup', function () {
      if ($(this).hasClass('is-valid')) {
        $("#submit").prop('disabled', false);
      }
    });
  });
});

提交按钮启用，第一个表单字段获得is-valid 类，而不验证其余的表单字段。只有当所有表单字段都具有is-valid 类时，我才能启用提交按钮。

更新后的工作代码下方：

   $forms = $("#form1, #form2");
            $formsInputs = $forms.find("input, select, textarea");
            $formsInputs.keyup(function () {
                if ($("#form1 .is-valid").length === 7) {
                    $("#submit").prop('disabled', false);
                }
                if ($("#form2 .is-valid").length === 12) {
                    $("#submit").prop('disabled', false);
                }
            });

Answer 1

我实际上会从不同的角度来解决这个问题。

每个表单都有固定数量的输入，对吧？ 只需将具有“is-valid”类的输入数量与页面上的输入总数相匹配即可。

if $('form1 input.is-valid').length == 12 {
 # enable the submit button
};

if $('form2 input.is-valid').length == 4 {
 # enable the submit button
};