Abide Foundation - активация valid.fndtn.abide

Я использую 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 работает, потому что проверка полей отображается.

Благодарю.

Источник

1 ответ

Для всех, у кого есть эта проблема, ответ Леа Фокс не сработал для меня, поскольку я уже инициализировал Foundation. Что действительно работало, так это создание нового экземпляра Abide прямо перед кодом 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.abide и invalid.fndtn.abide. Я не уверен, зачем это нужно, это может иметь какое-то отношение к модулям ES6.

Источник

Вам нужно инициализировать скрипт.

добавлять

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

Источник
Другие вопросы по тегам