Foundation 6 Соблюдайте пользовательскую проверку с помощью ajax

Question

Используя Foundation 6 Abide, я создал собственный валидатор, который должен проверять поле имени пользователя по шаблону и также обращаться к серверу, чтобы узнать, зарегистрировано ли уже имя пользователя. Когда пользовательский валидатор выполняется, он сначала проверяет имя пользователя по шаблону регулярных выражений - если это удается, он затем выполняет ajax-вызов на сервер, чтобы проверить, существует ли имя пользователя. Поскольку javascript не ждет, пользовательская функция проверки возвращает "true", указывая, что все в порядке. Когда ajax-вызов завершается, если имя пользователя найдено, он вызывает "addErrorClasses" в поле. Это прекрасно работает, однако я обеспокоен тем, что, так как валидатор ранее возвращал "true", так как он не хотел ждать на ajax, теперь нет никакого способа вернуть "false", и форма будет думать, что она в действительном государство.

ВОПРОС: Вызывает ли функция addErrorClasses пометить поле как недопустимое, что сделает форму недопустимым?

Foundation.Abide.defaults.validators.validate_username =
    function($el,required,parent) {
    // parameter 1 is jQuery selector
        if (!required) return true;

        let val = $el.val();

        // Step 1 - check that it meets the pattern
        if (!val.length)
            return true;

        let valid = new RegExp(username_pattern).test(val);
        if (!valid)
            return false;

        // Step 2 - check that the username is available
        $.ajax({
            url: "http://localhost:3000/users/"+val,
        }).done(function(data) {
            $('#demo-form').foundation('addErrorClasses',$el);
            console.log(data);
        }).fail(function() {
            // do nothing for now
        });

        return true;
};

Answer 1

Да, вызов addErrorClasses пометит этот элемент управления как "недействительный", но это зависит от того, где и как вы вызываете метод.

Поскольку вы выполняете ajax(то есть асинхронный), он возвращает true по умолчанию. К этому времени ваш элемент управления станет "действительным", и когда ajax получит ответ от "URL", он установит "недействительным" на основе вашего кода.

Когда вы пытаетесь отправить форму, базовая структура сбрасывает все элементы управления, т.е. удаляет все атрибуты "data-invalid", а затем выполняет все стандартные и пользовательские валидаторы. Тем не менее ваш метод возвращает true. Он не ждет ответа от вашего AJAX.

Форма будет отправлена, даже если у вас есть ошибки в вашем контроле.