Javascript 遵守基础触发验证。

我正在使用“遵守”在表单上运行验证，这很好。但是，如果表单有效或无效，我将很难执行操作

HTML:

未运行有效或无效侦听器中的代码

我不明白这为什么不起作用。是否未触发valid.fndtn.append的事件侦听器？“遵守”正在工作，因为字段的验证正在显示

---

谢谢。

您需要初始化脚本

加

JS-Bin
所需数量
你需要一个号码。
提交
$（document.foundation（）；
对于任何其他人都有这个问题，Lea Fox的回答对我来说不起作用，因为我已经初始化了基础。我们所做的工作是在表单JS代码之前创建一个新的实例。在这种情况下：

   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.append和invalid.fndtn.append触发器。我不确定为什么需要这样做，这可能与ES6模块有关

    $('#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');
};

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

   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");
      });