JQuery не может проверить форму, которая была вызвана из внешнего файла HTML - PullRequest
0 голосов
/ 14 февраля 2019

Моя импортированная форма не будет проверена с использованием плагина JQuery $(form).validate().

Я последовал примеру, предоставленному из этого вопроса , и получил форму, успешно работающую.Я переместил свою форму в /html/external.html (мне нравится хранить мой основной сайт в одном файле, index.php, а все внешние формы / элементы - в отдельном), и вызов функции проверки сделал не работа.

function validateForm() {
    $('#registerForm').validate({
        //rules
        ...

        submitHandler: function(form) {
            $.ajax({
                type: 'POST',
                url: url,
                data: $(form).serialize(), // Fixed typo
                success: function () {
                    alert('succss')
                }
            })
            return false;
        }
    })
}

$(document).ready(function() {
    validateForm() // Validating the form on page load
})

$(document).on('click', '.toFormScreen', function() {
    $('#welcome').remove() // Yes, #welcome was imported as well if the user was not logged in
    $('#mainContainer').load('./html/external.html #registerForm')
    validateForm();
})

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

Я попытался добавить функцию проверки нижезагрузка: validateForm() и это все еще не работает.

Возможно ли $(e).validate({...}) форма, которая была импортирована / добавлена ​​пользователем в любой момент времени после загрузки страницы из внешнего HTMLфайл?

РЕДАКТИРОВАТЬ: https://jqueryvalidation.org/ это плагин, который я использую.

1 Ответ

0 голосов
/ 14 февраля 2019

Проблема в том, что load() является асинхронным.Поэтому вы создаете экземпляр validate() на #registerForm до того, как был создан в DOM.

Чтобы это исправить, вам нужно поместить вызов на validateForm в обратном вызовеload():

$(document).on('click', '.toFormScreen', function() {
  $('#welcome').remove()
  $('#mainContainer').load('./html/external.html #registerForm', function() {
    validateForm();
  });
})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...