2

我正在使用 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 正在工作，因为正在显示字段验证。

谢谢。

4

2 回答 2

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>

于 2017-04-26T06:36:27.433 回答
1

对于其他遇到此问题的人，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 模块有关。

于 2019-12-01T21:24:38.263 回答