0

トリガー プラグインのしきい値オプションに問題があります... 基本的に、検証するフォームが大きく、このトリガーしきい値オプションを 1 つまたは 2 つのフィールドでのみ使用したいと考えています。私の問題は、このしきい値オプションを使用して、他のフィールドのイベント リスナーを削除しているように見えることです。

例えば：

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

ここで、タイトル フィールドではしきい値が正常に機能していることがわかりますが、他の 2 つのフィールドでは検証が更新されていません...

私は何か見落としてますか？

4

0 に答える 0