0

我对触发器插件的阈值选项有疑问...基本上我有很大的表单要验证，并且只想在一个或两个字段上使用此触发器阈值选项。我的问题是，似乎使用此阈值选项删除了其他字段上的事件侦听器。

例如：

<!doctype html>
<html lang="en">
<head>
  <title>FormValidation example - Trigger plugin</title>
  <meta charset="utf-8">
  <meta content="width=device-width,initial-scale=1" name="viewport">

  <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">

  <!-- Replace with your path -->
  <link rel="stylesheet" href="/vendors/formvalidation/dist/css/formValidation.min.css">
</head>
<body>
<form id="demoForm" method="POST">
  <div class="cf mb2">
    <div class="fl w-100">
      <div class="fl w-25 pa2">Title</div>
      <div class="fl w-30">
        <input type="text" class="input-reset ba b--black-20 pa2 mb2 db w-100" name="title" />
      </div>
    </div>
  </div>

  <div class="cf mb2">
    <div class="fl w-100">
      <div class="fl w-25 pa2">Summary</div>
      <div class="fl w-75">
        <textarea rows="5" class="input-reset ba b--black-20 pa2 mb2 db w-100" name="summary"></textarea>
      </div>
    </div>
  </div>

  <div class="cf mb2">
    <div class="fl w-100">
      <div class="fl w-25 pa2">Description</div>
      <div class="fl w-75">
        <textarea rows="5" class="input-reset ba b--black-20 pa2 mb2 db w-100" name="description"></textarea>
      </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 bg-blue white ph3 pv2 br2">Submit</button>
      </div>
    </div>
  </div>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script>

<!-- Replace with your path -->
<script src="/vendors/formvalidation/dist/js/FormValidation.min.js"></script>
<script src="/vendors/formvalidation/dist/js/plugins/Tachyons.min.js"></script>

<script>
  document.addEventListener('DOMContentLoaded', function(e) {
    FormValidation.formValidation(
      document.getElementById('demoForm'),
      {
        fields: {
          title: {
            validators: {
              notEmpty: {
                message: 'The title is required'
              }
            }
          },
          summary: {
            validators: {
              notEmpty: {
                message: 'The summary is required'
              }
            }
          },
          description: {
            validators: {
              notEmpty: {
                message: 'The description is required'
              }
            }
          },
        },
        plugins: {
          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',
          }),
          trigger: new FormValidation.plugins.Trigger({
            threshold: {
              title: 5
            }
          }),
        },
      }
    );
  });
</script>
</body>
</html>

在这里，我可以看到阈值在标题字段上运行良好，但验证不再在其他两个字段上更新......

我错过了什么？

4

0 回答 0