如何在所有表单字段验证通过后移除按钮的disabled属性？

当前问题：使用formvalidation.io工具时，只要填写全名或用户名其中一个字段并通过验证，提交按钮的disabled属性就会被移除，不符合「所有字段都验证通过才启用按钮」的需求。

问题原因 #

原代码中使用了FieldStatus插件的onStatusChanged回调，其中的areFieldsValid参数表示至少有一个字段验证通过，而非所有字段都有效，所以会出现单个字段有效就启用按钮的情况。

解决方案 #

移除FieldStatus插件，改用监听表单的整体有效性事件，以此来精准控制按钮的disabled状态。

修改后的代码 #

JavaScript部分

document.addEventListener('DOMContentLoaded', function(e) {
  const demoForm = document.getElementById('demoForm');
  const submitButton = demoForm.querySelector('[type="submit"]');

  const validator = FormValidation.formValidation(demoForm, {
    fields: {
      firstName: {
        validators: {
          notEmpty: {
            message: '请输入全名',
          },
        },
      },
      username: {
        validators: {
          notEmpty: {
            message: '请输入用户名',
          },
          stringLength: {
            min: 6,
            max: 30,
            message: '用户名长度需在6-30字符之间',
          },
          regexp: {
            regexp: /^[a-zA-Z0-9_]+$/,
            message: '用户名仅允许包含字母、数字和下划线',
          },
        },
      },
    },
    plugins: {
      trigger: new FormValidation.plugins.Trigger(),
      tachyons: new FormValidation.plugins.Tachyons(),
      submitButton: new FormValidation.plugins.SubmitButton(),
      icon: new FormValidation.plugins.Icon({
        valid: 'fa fa-check',
        invalid: 'fa fa-times',
        validating: 'fa fa-refresh',
      }),
    },
  });

  // 监听表单整体有效事件
  validator.on('core.form.valid', function() {
    submitButton.removeAttribute('disabled');
    submitButton.classList.add('bg-blue', 'white');
  });

  // 监听表单整体无效事件
  validator.on('core.form.invalid', function() {
    submitButton.setAttribute('disabled', 'disabled');
    submitButton.classList.remove('bg-blue', 'white');
  });
});

HTML部分

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css" />
<link rel="stylesheet" href="https://formvalidation.io/vendors/formvalidation/dist/css/formValidation.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script>
<script src="https://formvalidation.io/vendors/formvalidation/dist/js/FormValidation.min.js"></script>
<script src="https://formvalidation.io/vendors/formvalidation/dist/js/plugins/Tachyons.min.js"></script>


<form id="demoForm" method="POST">
  <div class="cf mb2">
    <div class="fl w-100">
      <div class="fl w-25 pa2">全名</div>
      <div class="fl w-50">
        <input type="text" name="firstName" class="input-reset ba b--black-20 pa2 mb2 db w-100" />
      </div>
    </div>
  </div>
  <div class="cf mb2">
    <div class="fl w-100">
      <div class="fl w-25 pa2">用户名</div>
      <div class="fl w-50">
        <input type="text" name="username" class="input-reset ba b--black-20 pa2 mb2 db w-100" />
      </div>
    </div>
  </div>
  <div class="cf mb2">
    <div class="fl w-100">
      <div class="fl w-25 pa2"></div>
      <div class="fl w-50">
        <button type="submit" class="ba b--black-20 ph3 pv2 br2" disabled>注册</button>
      </div>
    </div>
  </div>
</form>

说明 #

• 移除了原代码中容易误导的FieldStatus插件，避免单个字段有效就触发按钮启用的逻辑。
• 通过core.form.valid和core.form.invalid事件，只有当所有字段都验证通过时才启用按钮，完全符合需求。
• 也可以选择在字段验证变化时调用validator.isValid().then(function(isValid) { ... })来检查整体状态，效果一致。

内容的提问来源于stack exchange，提问作者Ivan Simonov