Основание 6: постоянный слушатель событий не работает

Question

Я использую Foundation 6 и пытаюсь получить форму ajax для работы с проверкой формы Abide.

Я адаптировал пример из документации. Сама валидация работает правильно, но не заставляет слушателей событий работать.

Вот мой код формы:

<form data-abide novalidate class="app-formular" name="kontakt">
<label>Nachname*
    <input type="text" placeholder="" name="nachname" required pattern="^.{2,100}$" />
    <span class="form-error">Bitte ausfüllen (min. 2, max. 100 Zeichen).</span>
</label>

<fieldset>
    <button class="button expanded" type="submit">Senden</button>
</fieldset>
</form>

Проверка правильности формы для обязательных полей работает довольно хорошо. Таким образом, я предполагаю, что структура Foundation правильно инициализирована.

В JS я проверяю форму в каждом цикле (может быть несколько форм на странице) и пытаюсь прослушать 3 события:

(1) formvalid.zf.abide

(2) forminvalid.zf.abide

(3) отправить

$( document ).ready(function() {
$('.app-formular').each(function( index ) {
    var random = Math.random();

    var form_name = $( this ).attr('name');
    console.log("Form >> "+ form_name +" << is there");

    // on.formvalid not working
    $( this ).on("formvalid.zf.abide", function(ev,frm) {
        console.log("(1) Form >> "+ form_name +" << is valid");

        var form_name = $( this ).attr('name');
        var form_data = $( this );

        if(typeof form_name !== "undefined" ) 
        {
            var fURL = '/_assets/js/aj_formular.asp?f=' + form_name + '&r=' + random;
            // Ajax-Objekt laden
            $.ajax ({
                data: form_data.serialize(),
                type: 'post',
                url: fURL,
                encoding:"UTF-8",
                dataType: 'html',
                success: function(result){
                    $(this).hide().html(result).fadeIn('fast');
                }
            });
        } else {
            var result ='<div class=""callout alert"">Fehler beim Formularversand.</div>'
            $(this).hide().html(result).fadeIn('fast');
        }
    });

    // on.forminvalid not working
    $( this ).on("forminvalid.zf.abide", function(ev,frm) {
        console.log("(2) Form >> "+ form_name +" << is invalid");
    });

    // works!!!
    $( this ).on("submit", function(ev) {
        ev.preventDefault();
        console.log("(3) Submit for form >> "+ form_name +" << intercepted");
    });
});
});

В console.log выскакивает только третье событие, остальные - нет, и я не могу понять, что я делаю неправильно.

Заранее спасибо за помощь.