Question

我使用Abide在表单上运行验证，工作正常。但是，如果表单有效或无效，我就无法执行操作。

HTML：

<form role="form" id="form_search_extended" name="form_search_extended" data-abide="ajax" novalidate>

    <input name="postalCode" type="text" value="{{$data['postalCode']['value']}}" placeholder="ZIP/Postal Code" required maxlength="10">

    <button type="submit" value="Submit">Submit</button>

</form>

使用Javascript：

    $('#form_search_extended')
      .on('invalid.fndtn.abide', function () {
        callFunctionOnValid();
        console.log('invalid!');
      })
      .on('valid.fndtn.abide', function () {
        console.log('valid!');
      });

var form = document.getElementById('form_search_extended');
form.onsubmit = function(e) {

    e.preventDefault();

    console.log('form submitted');
};

有效或无效的侦听器内的代码未被运行。

我不明白为什么这不起作用。不会触发valid.fndtn.abide的事件监听器吗？ Abide正在工作，因为字段的验证正在显示。

感谢。

Answer 1

您需要初始化脚本。

添加

  <script>
    $(document).foundation();
  </script>

关闭正文标记

之前的

$('#form_search_extended')
  .on('valid.fndtn.abide', function(e, el) {
    callFunctionOnValid();
    console.log('invalid!');
  })
  .on('invalid.fndtn.abide', function(e, el) {
    console.log(e.target, 'valid!');
  })
  .on("submit", function(ev) {
    ev.preventDefault();
    console.log("Submitted");
  });

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/normalize.min.css" rel="stylesheet" type="text/css" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css" rel="stylesheet" type="text/css" />
 
</head>

<body>

  <form data-abide novalidate role="form" id="form_search_extended" name="form_search_extended">
    <label>Number required
    <input name="postalCode" type="text"  placeholder="ZIP/Postal Code" required pattern="number" maxlength="10">
    </label>
    <small class="error">You need a number.</small>
    <button type="submit" value="Submit">Submit</button>
  </form>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/modernizr.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/plugins/foundation.abide.min.js"></script>
  <script>
    $(document).foundation();
  </script>
</body>

</html>

Answer 2

对于其他有此问题的人，Lea Fox的答案对我不起作用，因为我已经初始化了Foundation。所做的工作是在表单JS代码之前创建一个新的Abide实例。在这种情况下：

   const $form = $('#form_search_extended');

   // Create new Abide instance
   new Foundation.Abide($form);

   $form
      .on('valid.fndtn.abide', function(e, el) {
        callFunctionOnValid();
        console.log('invalid!');
      })
      .on('invalid.fndtn.abide', function(e, el) {
        console.log(e.target, 'valid!');
      })
      .on("submit", function(ev) {
        ev.preventDefault();
        console.log("Submitted");
      });

现在正在调用valid.fndtn.abide和invalid.fndtn.abide触发器。我不确定为什么要这样做，这可能与ES6模块有关。

Abide Foundation - 触发valid.fndtn.abide

2 个答案: