Question

我导入的表单无法使用JQuery的$(form).validate()插件进行验证。

我遵循了this question提供的示例，并使表格成功运行。我将表单移动到/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() 仍然不起作用。

从外部HTML文件加载页面后，是否可以$(e).validate({...})在任何给定时间由用户导入/添加的表单？

编辑：https://jqueryvalidation.org/是我正在使用的插件。

Answer 1

问题是因为load()是异步的。因此，您要在validate()上的#registerForm上实例化，然后再在DOM中创建它。

要解决此问题，您需要将呼叫validateForm放在load()的回调中：

$(document).on('click', '.toFormScreen', function() {
  $('#welcome').remove()
  $('#mainContainer').load('./html/external.html #registerForm', function() {
    validateForm();
  });
})

JQuery无法验证从外部HTML文件调用的表单

1 个答案: